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，你需要在示例中的javascript块中包含jQuery javascript library和代码。

现在，子导航的风格很明显，但可以根据需要添加更多样式。我已经评论了你应该添加它们的位置。

祝你好运。

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

1 个答案: