Выпадающее меню на css

[mogomar]

Можно код этой панели?

[Distructor]

Выпадающее меню на css

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;}       

html-код

Код: Выделить всё

<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> 

ну и фикс для IE6- (viewtopic.php?t=219)

Код: Выделить всё

<!--[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]-->

код не мой - был найден в интернете довольно давно (потому и источник найти проблематично), но был немного доработан.