Помогите сделать выпадающее меню на сайте

[Сергей 51]

Здравствуйте форумчане.

Помогите преобразовать обычное горизонтальное меню сайта в Выпадающее меню с 2 уровнями(Пример на фото)

 

Вот код уже имеющегося горизонтального меню:

 

<div class="default" id="menu"><div class="container"><a href="#999">Бытовые</a> <a href="#502">Промышленные</a> <a href="#503">Терморегуляторы</a> <a href="#504">Акции %</a> <a href="#505">Монтаж</a> <a href="#506">Отзывы (Видео)</a> <a href="#507">Контакты</a></div></div>

 

Вот его стили:

 

#menu {    height: 42px;    margin-top: -23px;    background: #027bb5; /* Old browsers */    background: -moz-linear-gradient(top,  #027bb5 0%, #015b9b 101%); /* FF3.6-15 */    background: -webkit-linear-gradient(top,  #027bb5 0%,#015b9b 101%); /* Chrome10-25,Safari5.1-6 */    background: linear-gradient(to bottom,  #027bb5 0%,#015b9b 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#027bb5', endColorstr='#015b9b',GradientType=0 ); /* IE6-9 */}#menu .container {width: 925px;margin: 0 auto;}#menu a {display: inline-block;    text-decoration: none;    padding: 10px 15px;    color: #fff;    font-size: 12.5pt;}#menu a:hover {background: #161e84; /* Old browsers */background: -moz-linear-gradient(top, #161e84 0%, #003056 101%); /* FF3.6-15 */background: -webkit-linear-gradient(top, #161e84 0%,#003056 101%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, #161e84 0%,#003056 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161e84', endColorstr='#003056',GradientType=0 ); /* IE6-9 */    border-radius: 7px;}

 

Помогите подправить его, и преобразовать в выпадающее меню с 2 уровнями.

 

Например: 

Бытовые

пункт 1

пункт 2-->подпункт№1

пункт 3           подпункт№2

 

А там уже на вашем примере сам его доделаю.

Буду благодарен за помощь!
 

Edited February 2, 2016 by Сергей 51

[DimmoS]

Списками

<ul>

<li>item 1</li>

<li>item 2</li>

<li>item 3

<ul>

<li>item 3-1</li>

<li>item 3-2</li>

</ul>

</li>

</ul>

как-то в таком стиле Edited February 2, 2016 by DimmoS

[Сергей 51]

Списками

<ul>    <li>item 1</li>    <li>item 2</li>    <li>item 3        <ul>            <li>item 3-1</li>            <li>item 3-2</li>        </ul>    </li></ul>

как-то в таком стиле

 

Это то понятно общее!

У меня сложность как правильно вставить в моё!?

Что где подправить (html и в style) !?

[TuTaHuKk]

Создание меню больше всего практикуется списками

 

<ul class="menu">

       <li><a href="#">Бытовые</a></li>

       <li><a href="#">Промышленные</a></li>

       <li><a href="#">Терморегуляторы</a>

 

</li>

</ul>

 

<div class="default" id="menu">
<div class="container">
<a href="#999">Бытовые</a> <a href="#502">Промышленные</a> <a href="#503">Терморегуляторы</a> <a href="#504">Акции %</a> <a href="#505">Монтаж</a> <a href="#506">Отзывы (Видео)</a> <a href="#507">Контакты</a></div>
</div>

[Сергей 51]

Создание меню больше всего практикуется списками

 

<ul class="menu">

       <li><a href="#">Бытовые</a></li>

       <li><a href="#">Промышленные</a></li>

       <li><a href="#">Терморегуляторы</a>

 

</li>

</ul>

 

<div class="default" id="menu">

<div class="container">

<a href="#999">Бытовые</a> <a href="#502">Промышленные</a> <a href="#503">Терморегуляторы</a> <a href="#504">Акции %</a> <a href="#505">Монтаж</a> <a href="#506">Отзывы (Видео)</a> <a href="#507">Контакты</a></div>

</div>

Можно для тугих(как я) показать на примере конкретном:

Вот так чтобы получилось:

Бытовые

пункт1

пункт2-->подпункт 1

                подпункт 2

Вот код:

<div class="default" id="menu"><div class="container"><a href="#999">Бытовые</a></div></div>

Вот стили:

#menu {    height: 42px;    margin-top: -23px;    background: #027bb5; /* Old browsers */    background: -moz-linear-gradient(top,  #027bb5 0%, #015b9b 101%); /* FF3.6-15 */    background: -webkit-linear-gradient(top,  #027bb5 0%,#015b9b 101%); /* Chrome10-25,Safari5.1-6 */    background: linear-gradient(to bottom,  #027bb5 0%,#015b9b 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#027bb5', endColorstr='#015b9b',GradientType=0 ); /* IE6-9 */}#menu .container {width: 925px;margin: 0 auto;}#menu a {display: inline-block;    text-decoration: none;    padding: 10px 15px;    color: #fff;    font-size: 12.5pt;}#menu a:hover {background: #161e84; /* Old browsers */background: -moz-linear-gradient(top, #161e84 0%, #003056 101%); /* FF3.6-15 */background: -webkit-linear-gradient(top, #161e84 0%,#003056 101%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, #161e84 0%,#003056 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161e84', endColorstr='#003056',GradientType=0 ); /* IE6-9 */    border-radius: 7px;}

Как правильно прописать в коде?

И что исправить/добавить в стиле нужно?(и так чтобы сохранилось горизонтальное меню,как оно есть сейчас)

Edited February 2, 2016 by Сергей 51

[Launder]

https://jsfiddle.net/Launder/ghny4qvr/

 

Вот Вам пример.

[Launder]

Вот ещё в этой теме трёхуровневое меню:

 

http://htmlforum.ru/index.php?showtopic=54454&hl=

 

в моей интерпритации:

 

https://jsfiddle.net/Launder/mc3m734z/

 

https://jsfiddle.net/Launder/mc3m734z/2/

[Сергей 51]

Вот ещё в этой теме трёхуровневое меню:

 

http://htmlforum.ru/index.php?showtopic=54454&hl=

 

в моей интерпритации:

 

https://jsfiddle.net/Launder/mc3m734z/

 

https://jsfiddle.net/Launder/mc3m734z/2/

Спасибо! Более менее помогли разобраться.

а не подскажите еще в след.вопросе:

Есть готовое меню.

Как сделать, чтобы при переходе по Выбранному пункту меню, он был окрашен.

Т.е. чтобы цвет на нём зафиксировался, и не пропадал, пока не переду в другой пункт.

Вот ссылка сразу для онлайн правки: https://jsfiddle.net/zzvewxhw/

Там и html и css стили.

[Launder]

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

Edited February 14, 2016 by Launder

[Pashkes]

Зачем плодить большую вложенность селекторов, не проще было навесить каждому уровню меню отдельные классы, например menu-item для первого уровня, submenu-item для подменю. Вдруг он захочет сделать 3 или 4 уровень, представьте какой длинный селектор будет если он ссылки 3 или 4 уровня захочет сделать другим цветом

Edited February 17, 2016 by Pashkes

[Launder]

не проще было навесить каждому уровню меню отдельные классы

 

Нет, ну проще, конечно

Edited February 17, 2016 by Launder