1 Topic by PunBB

Topic: Горизонтальное выпадающее меню HTML + CSS

Горизонтальное выпадающее меню сделать не составит труда, если вы хоть немного знакомы с HTML & CSS. Я приведу простой пример несколько выпадающих пунктов, которые вы легко можете отредактировать под свои нужды.

Выпадающее верхнее меню стиль CSS
Стили CSS, можно подкличить либо с помощью файла, либо разместив данный код между тегами <style>код</style>

}
#nav {
font:13px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:120px;
margin-top:-10000px;
}
#nav li a {
width:120px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-119px;
margin-top:10000px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

2 Reply by PunBB

Re: Горизонтальное выпадающее меню HTML + CSS

Ну и затем вставить на html страницу само меню:

<ul id="nav">
<li><a href="#">Меню 1</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 2</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 3</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 4</a></li>
<li><a href="#">Меню 5</a></li>
</ul>