Html5 выпадающее меню: Как создать выпадающее меню

Leave a Comment / Html / By /

Как создать выпадающее меню с помощью HTML и CSS

Выпадающее меню позволяет создать четкое и иерархическое представление всех основных разделов. Вы можете создать выпадающее меню с HTML раскрывающимся списком, не используя ничего, кроме языка гипертекста и CSS.

  • Часть 1
    • Составление HTML
  • Часть 2
    • Составление CSS
    • Подсказки
  1. Создание раздела навигации. Как правило, мы используем для главной панели навигации сайта тег <nav>, <header> — для более узких разделов или <div>, если нет других вариантов. Поместите этот код в элемент <div>, чтобы можно было задать стили для всего меню:
<div>
 <nav>
     </nav>
</div>
  1. Задайте для каждого раздела название класса.
    Мы будем использовать атрибут класса позже, чтобы определить стиль этих элементов с помощью CSS. Задайте названия классов для контейнера и меню с раскрывающимся списком HTML:
<div>
<nav>
</nav>
</div>
  1. Добавьте список пунктов меню. Неупорядоченный список (<ul>) содержит пункты главного меню (<li>), на которые пользователи будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс «clearfix» для элементов списка. Мы вернемся к этому позже в разделе CSS:
<div>
   <nav>
<ul>
   <li>Home</li>
              <li>Contributors</li>
         <li>Contact Us</li>
 </ul>
   </nav>
</div>
  1. Добавление ссылок. Теперь нужно добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор (например, «#!»), чтобы курсор пользователя менял внешний вид при наведении на них.
    В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:
<div>
   <nav>
      <ul>
       <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         </li>
         <li><a href="#!">Contact Us</a>
         </li>
      </ul>
   </nav>
 </div>
  1. Создание списков вложенных элементов. После того, как мы установим стили, эти раскрывающиеся списки HTML станут выпадающими меню. Вложите список в элемент, на который пользователь будет наводить курсор. Задайте имя класса и ссылку, как мы делали ранее:
<div>
   <nav>
      <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         <ul>
            <li><a href="/jordan">Michael Jordan</a></li>
            <li><a href="/hawking">Stephen Hawking</a></li>
         </ul>
         </li>
         <li><a href="#!">Contact Us</a>
         <ul>
            <li><a href="mailto:bugsupport@company.
 
 com">Report a Bug</a></li>
            <li><a href="/support">Customer Support</a></li>
         </ul>
         </li>
      </ul>
   </nav>
</div>
  1. Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:
  1. Добавьте код clearfix. Помните класс «clearfix», который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:
.clearfix:after {
content: "";
display: table;
}
  1. Создание базовой структуры. Представленный ниже код задает размещение меню вдоль верхней части страницы и скрывает выпадающие элементы. Это только каркас общей структуры, который позволяет сосредоточиться на других элементах раскрывающегося свертывающегося списка HTML. Вы можете позже расширить его дополнительными свойствами CSS, такими как отступы и интервалы:
.nav-wrapper {
   width:100%;
   background: #999;
}
.nav-menu {
   position:relative;
   display:inline-block;
}
.nav-menu li {
   display: inline;
   list-style-type: none;
}
.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}
  1. Задаем вывод выпадающих элементов при наведении курсора мыши. Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется вывод вложенного списка при наведении курсора мыши на родительский элемент:
.nav-menu ul li:hover > ul {
   display:inline-block;
}

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «. nav-menu > ul»:

  1. Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:
.nav-menu > ul > li:after {
   content: "25BC"; /*escaped unicode for the down arrow*/
   font-size: .5em;
   display: inline;
   position: relative;
   }

Изменить положение стрелки можно с помощью свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

  1. Настройка отступов, фона и других свойств. Теперь наше меню является функциональным, но мы можем несколько улучшить его внешний вид с помощью редактирования кода CSS.
  • Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
  • Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.

Вадим Дворниковавтор-переводчик статьи «How to Create a Dropdown Menu in HTML and CSS»

Создание выпадающего меню на css

В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые.

Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.

Собственно, вот она, вся разметка:

01.<nav id = «nav»>

02.<ul>

03.<li><a href = «#»>Пункт 1</a>

04.<ul class = «second»>

05.<li><a href = «#»>Подпункт</a></li>

06.<li><a href = «#»>Подпункт</a></li>

07.<li><a href = «#»>Подпункт</a></li>

08.</ul>

09.</li>

10.<li><a href = «#»>Пункт 2</a>

11.<ul class = «second»>

12.<li><a href = «#»>

Подпункт</a></li>

13.<li><a href = «#»>Подпункт</a></li>

14.<li><a href = «#»>Подпункт</a></li>

15. </ul>

16.</li>

17.<li><a href = «#»>Пункт 3</a>

18.<ul class = «second»>

19.<li><a href = «#»>Подпункт</a></li>

20.<li><a href = «#»>Подпункт</a></li>

21.<li><a href = «#»>Подпункт</a></li>

22.</ul>

23.</li>

24.<li><a href = «#»>Пункт 4</a>

25.<ul class = «second»>

26.<li><a href = «#»>

Подпункт</a></li>

27.<li><a href = «#»>Подпункт</a></li>

28.<li><a href = «#»>Подпункт</a></li>

29.</ul>

30.</li>

31.</ul>

32.</nav>

Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.

Пишем css-стили

Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.

1.*{

2.margin: 0;

3.padding: 0;

4.}

Далее я пропишу общие стили для самого меню, а также для списков, чтобы убрать у них маркеры.

1.#nav{

2.height: 70px;

3.}

4.#nav ul{

5. list-style: none;

6.}

Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

1.#nav > ul > li{

2.float: left;

3.width: 180px;

4.position: relative;

5.}

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.

В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.

Далее мы с вами преобразим внешний вид нашего меню. Вот такие стили для этого я прописал ссылкам:

01.#nav li a{

02.display: block;

03.background: #90DA93;

04.border: 1px solid #060A13;

05.color: #060A13;

06.padding: 8px;

07.text-align: center;

08. text-decoration: none;

09.}

10.#nav li a:hover{

11.background: #2F718E;

12.}

Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.

Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.

Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.

1.#nav li .second{

2.display: none;

3.position: absolute;

4.top: 100%;

5.}

Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

Теперь мы видим на веб-странице только основное меню, что нам и нужно.

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

1.#nav li:hover .second{

2.display: block;

3.}

Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.

Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:

1.#nav li li{

2.width: 180px;

3.}

Все, проблема решена:

Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.

Переделываем меню в вертикальное

Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.

Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?

Теперь остается изменить правила для селектора #nav li . second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

1.#nav li .second{

2.display: none;

3.position: absolute;

4.left: 100%;

5.top: 0;

6.}

То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.

01.<li><a href = «#»>Пункт 4</a>

02.<ul class = «second»>

03.<li><a href = «#»>Подпункт</a>

04.<ul class = «third»>

05.<li><a href = «#»>Подпункт подпункта</a></li>

06.<li><a href = «#»>Подпункт подпункта</a></li>

07.</ul>

08.</li>

09.<li><a href = «#»>Подпункт</a></li>

10.<li><a href = «#»>Подпункт</a></li>

11.</ul>

12.</li>

Опять же, разметка превращается в громоздкую и непонятную, но если вы будете внимательным, то увидите, в чем здесь вся суть. Далее работаем с css:

01.#nav li li .third{

02.display: none;

03.position: absolute;

04.left: 100%;

05.top: 0;

06.}

07.#nav li li:hover .third{

08.display: block;

09.}

Соответственно, убираем вложенное меню третьего уровня с экрана, делаем ему абсолютное позиционирование и прописываем такие координаты, как в случае с вертикальным меню. То есть данный список будет отображаться при наведении на первый подпункт четвертого пункта и будет отображаться сбоку.

Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?

Что ж, если вам нужно меню трех уровней, то придется убирать у second абсолютное позиционирование, а у главных пунктов убирать относительное. Вся фишка в том, что в случае с горизонтальным меню это никак не повлияет на отображение навигации – подпункты по-прежнему будут располагаться под главным пунктом при наведении на него.

Зато после этих изменений вы сможете добавить меню для каждого подпункта. Опять же, необязательно оно должно отображаться сбоку, это всего лишь моя идея, вы можете отображать его под подпунктом при наведении на него. Тогда вообще никакого позиционирования не понадобится!

В общем, итог таков:

При наведении на пункт 4 появляется первое выпадающее меню, при наведении на первый подпункт появляется отдельное меню для него, которое расположено сбоку. У других подпунктов такое меню не отображается, так как мы не создавали его в html-разметке.

Если вы смогли разобраться, то уже самостоятельно сможете создать нужное вам выпадающее меню и самостоятельно решить проблемы, если это возможно в рамках css.

 

Как разработать раскрывающееся меню HTML5 и CSS3 (учебное пособие)

Раскрывающееся меню является основной функцией большинства современных веб-сайтов. Это группа пунктов навигационного меню, в котором нажатие на элемент раскрывает раскрывающийся список. Поскольку меню расширяется вниз, оно называется «выпадающим меню».

В этом уроке мы объясним, как вы можете разработать свои собственные раскрывающиеся меню с помощью кода CSS3 и HTML5. Мы не будем использовать JavaScript или jQuery!

Итак, начнем.

Разметка HTML

Шаг 1:

Создайте документ HTML и добавьте в него следующую строку кода.

 

<голова>
<мета-кодировка="UTF-8">
Выпадающее меню


<тело>

Шаг 2:

Создайте тег

Если HTML-страница с приведенным выше кодом просматривается в браузере, она будет выглядеть так:

Стиль CSS

Однако мы хотим, чтобы в одной строке отображались только элементы верхнего уровня, а при наведении курсора над этими элементами вложенные элементы списка должны отображаться в виде раскрывающегося меню. Это будет сделано через CSS.

Создайте новый файл CSS с именем «style.css» и поместите его в тот же каталог, где находится HTML, созданный на начальных этапах.

Добавьте разметку, показанную ниже, в файл CSS. Разметка была объяснена под каждым фрагментом кода.

Шаг 4: 

 ул{
заполнение: 0;
маржа: 0;
тип стиля списка: нет;
}

Эта приведенная выше разметка удалит отступы и поля из всех ненумерованных списков из HTML-кода.

Шаг 5: 

 ul#menu li{
фон: #47a3da;
плыть налево;
}

Приведенная выше разметка говорит, что нужно перейти к ненумерованному списку с идентификатором «menu» и оформить его элементы таким образом, чтобы цвет фона стал синим, а все элементы списка были перемещены влево.

Это расположит все элементы верхнего уровня в одной строке. Он также удаляет маркеры из списка.

Шаг 6: 

 ul#menu li a{
цвет: #000000;
дисплей: блок;
отступ: 10px 25px;
текстовое оформление: нет;
нижняя граница: 2px сплошная #000000;
}

Приведенный выше код говорит, что перейдите к неупорядоченному списку с идентификатором «меню», стилизуйте все ссылки внутри элементов списка, измените цвет на черный, измените стиль отображения на блокировку и добавьте верхнее и нижнее отступы по 10 пикселей. в то время как правое и левое заполнение до 25px.

Далее, для text-decoration установлено значение none, что удалит подчеркивание ссылки.

Наконец, нижняя граница оформлена.

Шаг 7: 

 ul#menu li a:hover{
фон: #72caff;
}

Эта разметка изменит цвет ссылок при наведении курсора на элементы списка верхнего уровня.

Шаг 8: 

 ul#menu li ul li{
поплавок: нет;
}

Вышеупомянутый фрагмент кода говорит о том, что не плавают элементы списка внутреннего неупорядоченного списка.

 ул#меню ли ул{
положение: абсолютное;
дисплей: нет;
}

Вышеупомянутая разметка скроет внутренний неупорядоченный список и установит его позицию в абсолютную.

 ул{
ul#menu li:наведите ul{
    дисплей: блок;
}

Наконец, приведенная выше разметка заставит элементы внутреннего неупорядоченного списка появляться при наведении курсора на один из элементов списка верхнего уровня.

Теперь, если вы добавите ссылку на этот файл CSS в файл HTML, который вы создали в первых трех шагах, а затем обновите страницу, вы сможете увидеть раскрывающееся меню.

Создать раскрывающееся меню навигации с помощью HTML5 и CSS3

автор: Madalin Tudose в: CSS3, Tutorials

Есть несколько отличных решений для выпадающих навигационных меню, например плагин superfish jquery. Многие из них используют много файлов и ресурсов для создания раскрывающихся списков, но иногда вам не нужны все они. Я хочу показать вам, как создать собственное простое, но стильное выпадающее меню, используя новые теги HTML5 и потрясающие стили CSS3.

Демо

Меню навигации (8635 загрузок)

Выпадающий список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы будем анимировать состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы привыкли использовать. Структура файлов проста. Вам нужны файлы index. html и style.css, в которых будут храниться стили css.

Вот предварительный просмотр того, что мы будем строить сегодня:

Начнем со структуры HTML. Это головная часть:



Раскрывающееся меню навигации HTML5/CSS3
<мета-имя="описание" содержание="">

В основную часть добавим html код навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «»» к каждому родительскому li, чтобы показать иерархию. Код создает прямые двойные угловые кавычки для элемента.


<тело>
<навигация>
<ул>

  • Главная
    • 

  • Службы »
<ул>

  • Веб-разработка
    • 

  • Дизайн логотипа
    • 

  • Идентификация и брендинг »
<ул>

  • Визитные карточки
    • 

  • Брошюры
    • 

  • Конверты
    • 

  • Флаеры
    • 



  • Вордпресс
    • 



  • Портфолио »
<ул>

  • Графический дизайн
    • 

  • Фотография
    • 

  • Архитектура
    • 

  • Каллиграфия
    • 

  • Фильм »
<ул>

  • Джон Картер
    • 

  • Мстители
    • 

  • Новый Человек-Паук
    • 

  • Мадагаскар 3
    • 



  • Граффити 
    • 



  • Отзывы
    • 

  • Блог
    • 

  • Контакты
    •

    Теперь давайте стилизуем навигацию. Начнем со стилей для основной навигации. Стили для #nav id можно удалить, если хотите. Они просто центрируют меню. Вы можете изменить их в соответствии с вашим дизайном.

    
/* Основная навигация */
#nav {
должность: родственница;
ширина: 620 пикселей;
поле:0 авто;
поле сверху: 50px;
отступ: 10 пикселей;
}

ул#навигация {
поле: 0px авто;
должность: родственница;
плыть налево;
граница слева: 1px сплошная #c4dbe7;
граница справа: 1px сплошная #c4dbe7;
}

ул # навигация ли {
дисплей: встроенный;
размер шрифта: 12px;
вес шрифта: полужирный;
маржа: 0;
заполнение: 0;
плыть налево;
должность: родственница;
граница сверху: 1px сплошная #c4dbe7;
нижняя граница: 2px сплошная #c4dbe7;
}

ul#navigation li a {
отступ: 10 пикселей 25 пикселей;
цвет:#616161;
тень текста: 1px 1px 0px #fff;
текстовое оформление: нет;
дисплей: встроенный блок;
граница справа: 1px сплошная #fff;
граница слева: 1px сплошная #C2C2C2;
граница сверху: 1px сплошная #fff;
фон: #f5f5f5;

-webkit-transition: цвет 0,2 с, линейный, фон 0,2 с, линейный;
-moz-transition:цвет 0. 2с линейный, фон 0.2с линейный;
-o-переход: цвет 0,2 с, линейный, фон 0,2 с, линейный;
переход: цвет 0,2 с, линейный, фон 0,2 с, линейный;
}

ul#navigation li a:hover {
фон:#f8f8f8;
цвет:#282828;
}

ul#navigation li a.first {
граница слева: 0 нет;
}

ul#navigation li a.last {
граница справа: 0 нет;
}

ul#navigation li:hover > a {
фон:#fff;
}

    Обратите внимание, что ul#navigation li a имеет несколько стилей перехода. Они используются для создания приятного эффекта затухания при наведении.

    Теперь стилизуем выпадающие меню:

    
/* Навигация по выпадающему списку */
ul#navigation li:hover > ul
{
/*эти 2 стиля очень важны,
это те, которые заставляют раскрывающийся список появляться при наведении */
видимость: видимая;
непрозрачность:1;
}

ul#навигация ul, ul#навигация ul li ul {
стиль списка: нет;
    маржа: 0;
    заполнение: 0;
/*следующие 2 стиля очень важны,
это те, которые заставляют раскрывающийся список оставаться скрытым */
    видимость: скрытая;
    непрозрачность:0;
    положение: абсолютное;
    z-индекс: 99999;
ширина: 180 пикселей;
фон:#f8f8f8;
box-shadow:1px 1px 3px #ccc;
/* переходы css3 для плавного эффекта наведения */
-webkit-transition: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
-moz-transition: непрозрачность 0,2с линейная, видимость 0,2с линейная;
-o-переход: непрозрачность 0,2с линейная, видимость 0,2с линейная;
переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
}

ул#навигация ул {
    верх: 43px;
    слева: 1px;
}

ul#навигация ul li ul {
    сверху: 0;
    слева: 181px; /* сильное отношение к ширине:180px; сверху */
}

ul # навигация ul li {
ясно: оба;
ширина:100%;
граница:0 нет;
нижняя граница: 1px сплошная # c9с9с9;
}

ul # навигация ul li a {
фон:нет;
отступ: 7px 15px;
цвет:#616161;
тень текста: 1px 1px 0px #fff;
текстовое оформление: нет;
дисплей: встроенный блок;
граница:0 нет;
плыть налево;
ясно: оба;
ширина: 150 пикселей;
}

    Теперь меню стилизовано и процесс разработки завершен.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *