Здравствуйте форумчане!
Столкнулся со след.проблемой: есть обычное горизонтальное меню.
Нужно из него сделать выпадающее.
Но не получается преобразовать его правильно.
Вот так чтобы получилось:
Бытовые
пункт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: progidXImageTransform.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: progidXImageTransform.Microsoft.gradient( startColorstr='#161e84', endColorstr='#003056',GradientType=0 ); /* IE6-9 */
border-radius: 7px;}
Как правильно прописать в коде ul и li (с учётом моего имеющегося, чтобы не нарушить стиль)?
Что добавить и переименовать в коде и в стиле?
Столкнулся со след.проблемой: есть обычное горизонтальное меню.
Нужно из него сделать выпадающее.
Но не получается преобразовать его правильно.
Вот так чтобы получилось:
Бытовые
пункт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: progidXImageTransform.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: progidXImageTransform.Microsoft.gradient( startColorstr='#161e84', endColorstr='#003056',GradientType=0 ); /* IE6-9 */
border-radius: 7px;}
Как правильно прописать в коде ul и li (с учётом моего имеющегося, чтобы не нарушить стиль)?
Что добавить и переименовать в коде и в стиле?