帮助将普通导航栏转换为下拉导航栏

Question

我有一个简单的导航栏，我想将其转换为下拉导航栏，但我不确定需要做什么才能完成此操作。我需要特定的 javascript 代码或 css 吗？谢谢

/* navigation menu */
div#navigation {
    height:55px;
    background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
    background:transparent url('images/nav-left.png') no-repeat scroll top left;
    height:55px;
}
div#navigation ul {
    background:transparent url('images/nav-right.png') no-repeat scroll top right;
    list-style:none;
    margin:0; 
    padding:0 10px;
    position:relative;
    top:0;
    height:55px;
    display:block;
}
div#navigation ul li {
    display:block;
    float:left;
}
div#navigation ul li a {
    display:block;
    float:left;
    color:#ffffff;
    border-bottom:none;
    height:32px;
    font-family:"Trebuchet MS", Verdana, Arial;
    font-weight:bold;
    font-size:1.2em;
    padding:14px 20px 9px;
    border-right:1px solid #060D14;
    border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
    border-left:none;
}
div#navigation ul li.navright a {
    border-right:none;
}
div#navigation ul li a:hover {
    color:#FC8228;
}


<div id="navigation">
        <div id="innernav">
            <ul>
                <!-- top navigation  -->
                <!-- add class navleft to first item and navright to last item as shown -->
                <li class="navleft"><a href="index.html">home</a></li>
                <li><a href="examples.html">examples</a></li>
                <li><a href="#">solutions</a></li>
                <li><a href="#">our service</a></li>
                <li><a href="#">support</a></li>
                <li class="navright"><a href="#">contact</a></li>
            </ul>
        </div>
    </div>

Answer 1

下面是一个使用 suckerfish 方法的示例：

http://jsfiddle.net/uCdGc/

这就是神奇之处CSS：

/* Code for dropdown */
#navigation ul li ul {
    position: absolute;
    left:-999em;
}
#navigation ul li ul li {
    float:none;
    /* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
    left:auto;
    margin-top:55px;
}

有关 suckerfish 的更多信息，请查看以下网址：http://www.htmldog.com/ articles/suckerfish/dropdowns/

我所做的是将包含子导航元素的 ul 元素添加到“示例”导航项中。当您将鼠标悬停在上方时，CSS 将定位子导航，以便它出现在您想要的位置。这应该无需任何 javascript 即可工作，但如果您想支持 IE 6，则需要包含 jQuery javascript 库以及示例中 javascript 块中的代码。

现在，子导航的样式很简单，但可以根据需要添加更多样式。我已经评论过你应该在哪里添加它们。

祝你好运。