Форум программистов [Powered by Invision Power Board]

Код


 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <title></title>
<style type="text/css">

</style>
<script type="text/javascript" language="javascript">
<!--//--><![CDATA[//><!--
    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 && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
    <li><a href="#null">Домой</a></li>
    <li><a href="#null">Каталог</a>
        <ul>
            <li><a href="#null">Вся продукция</a>
                <ul>
                    <li><a href="#null">По дате</a></li>
                    <li><a href="#null">Производители</a></li>
                    <li><a href="#null">Другое</a></li>
                </ul>
            </li>
            <li><a href="#null">Молотки</a>
                <ul>
                    <li><a href="#null">По дате</a>                    
                        <ul>
                            <li><a href="#null">По дате</a></li>
                            <li><a href="#null">По производителю</a></li>
                        </ul>                    
                    
                    </li>
                    <li><a href="#null">По производителю</a></li>
                </ul>
            </li>
            <li><a href="#null">Гвозди</a></li>
            <li><a href="#null">Доски</a></li>
        </ul>
    </li>
    <li><a href="#null">Новости</a>
        <ul>
            <li><a href="#null">Новости сайта</a>
            </li>
            <li><a href="#null">Новости компании</a>
                <ul>
                    <li><a href="#null">Архив</a></li>
                    <li><a href="#null">Пресс-релизы</a></li>
                    <li><a href="#null">Разное</a></li>
                </ul>
            </li>
            <li><a href="#null">Архив</a></li>
        </ul>
    </li>
    <li><a href="#null">Контакты</a></li>
</ul>
</body>
</html>

Код


#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  background: #515151;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: #515151;
  background: none;
}
#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 120px;
  padding: 4px 10px;
  background: url(dot.png) repeat-y right;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover,
#nav li.jshover {
  background: #333;
}
#nav li ul {
  display: none;
  position: absolute;
  background: #ccc;
  padding: 8px 0;
  width: 138px;
}
#nav li li a {
  width: 118px;
  background: none;
}
#nav li:hover ul,
#nav li.jshover ul {
  display: block;
}
#nav li:hover li ul,
#nav li.jshover li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 118px;
  left: 133px;
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
  display: block;
}