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

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 library以及示例中 javascript block 中的代码。

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

祝你好运。