Состоять наше меню будет из простого списка и при наведении на этот список будет выпадать еще одно горизонтальное меню.
НTML
Этот код вставляете в любое место, где хотите увидеть меню:

Код

<div class="menu_container">
  <nav class="menu">
  <ul>
  <li><a href="#" class="selected">Главная</a>
  <ul class="visible">
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  <li><a href="#">Форум</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  <li><a href="#">Новости</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  <li><a href="#">Блог</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  <li><a href="#">О нас</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  <li><a href="#">Портфолио</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  <li><a href="#">Контакты</a>
  <ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a></li>
  <li><a href="#">Пункт 5</a></li>
  <li><a href="#">Пункт 6</a></li>
  </ul>
  </li>
  </ul>
  <form class="search">
  <input type="text" class="search_field" name="search" placeholder="Поиск...">
  <input type="submit" class="button" value="" >
  </form>
  </nav>
  </div>

Файлы для скачивания отсутствуют.

Поблагодарить автора Автор: Turbo

Комментарии (0)

Добавить комментарий

Меню