Здравствуйте все. У меня такая проблема есть горизонтальное меню, но я хочу его сделать еще и раздвижным при наведении на ссылку чтобы выезжало доп. меню с другими категориями.
Вот сам код:
Code
<ul class="topnav">
<li style="border:0;"><a class="ms1" href="/">Главная</a></li>
<li><a href="/news">Новости</a></li>
<li><a href="/">Разделы сайта</a></li>
<li><a href="/forum">Форум</a></li>
<li><a class="ms2" href="/faq">О нас</a></li>
</ul>
Это в CSS:
Code
ul.topnav {padding:0; margin:0; list-style-type: none;}
ul.topnav li {
float: left;
margin: 0;
padding: 0;
position: relative;
border-left:1px solid #b5b5b5; width:120px;
font:11px Verdana;
}
ul.topnav li a{display:block; width:115px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#222; text-shadow:0 1px 1px #fff; background:#eee url(/img/mf.png) repeat-x; text-align:center;}
ul.topnav li a.ms1 {background:#eee url(/img/ms1.png);}
ul.topnav li a.ms2 {background:#eee url(/img/ms2.png);}
ul.topnav li:hover > a{color:#fff; background:#999 url(/img/mf.png) 0 -30px repeat-x; border-right:1px solid #e2e2e2; text-shadow:0 1px 1px #000;}
ul.topnav li:hover > a.ms1 {background:#999 url(/img/ms1.png) 0 -30px;}
ul.topnav li:hover > a.ms2 {background:#999 url(/img/ms2.png) 0 -30px;}
Вот в чем и собственно вопрос.
Можно сделать вот так
Code
<li><a href="/forum/3">Новости</a>
<ul>
<li><a href="/forum/4">Новости</a></li>
к примеру. Доп категории видно но они не прячутся когда не наводишь на ссылку.
