Выпадающее меню на css
- Distructor
- Администратор
- Сообщения: 1607
- Зарегистрирован: 28.12.2009
Выпадающее меню на css
css стили
html-код
ну и фикс для IE6- (viewtopic.php?t=219)
код не мой - был найден в интернете довольно давно (потому и источник найти проблематично), но был немного доработан.
css стили
Код: Выделить всё
#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
background: none;
font: bold 10px/1.5em Verdana;
}
#nav li {
float: left;
position: relative;
width: 100px;
background: none;
}
#nav a {
color: #aaa;
text-decoration: none;
display: block;
padding: 0px 5px;
text-align: left;
}
#nav a:hover {
color: #000;
background: none;
text-align: left;
}
#nav a span{
color: #555;
text-decoration: none;
display: block;
height: 29px;
padding: 3px 0px 0px 0px;
vertical-align: middle;
text-align: center;
}
#nav a:hover span{
color: #fff;
text-align: center;
vertical-align: middle;
padding: 3px 0px 0px 0px;
}
#nav li ul {
display: none;
position: absolute;
background: url(images/fone-tr.png);
padding: 4px 0;
width: 170px;
}
#nav li li a {
width: 155px;
background: none;
}
#nav li:hover ul, #nav li.jshover ul { display: block; left: 0px;}
#nav li:hover li ul, #nav li.jshover li ul {
display: none;
width: 155px;
top: -6px;
left: 154px;
}
#nav li:hover li:hover ul, #nav li.jshover li.jshover ul { display: block;}
Код: Выделить всё
<ul id="nav">
<li><a href="http://coder.v-tanke.ru"><span>Форум</span></a>
<ul>
<li><a href="http://coder.v-tanke.ru">Главная страница</a></li>
<li><a href="./faq.php">FAQ</a></li>
<li><a href="./search.php">Поиск</a></li>
<li><a href="./search.php?search_id=active_topics&sr=topics">Активные темы</a></li>
<li><a href="./search.php?search_id=unanswered">Сообщения без ответов</a></li>
<li><a href="./ucp.php?mode=register">Регистрация</a></li>
<li><a href="./ucp.php?mode=login">Вход</a></li>
</ul>
</li>
</ul>
Код: Выделить всё
<!--[if lte IE 6]>
<script type="text/javascript">
jsHover = function() {
var hEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent) window.attachEvent("onload", jsHover);
</script>
<![endif]-->