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

【问题标题】：help converting a normal nav bar to a drop down nav bar帮助将普通导航栏转换为下拉导航栏
【发布时间】：2011-07-22 07:14:58
【问题描述】：

我有一个简单的导航栏，我想将其转换为下拉导航栏，但我不确定我必须做什么才能完成此操作。我需要特定的 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>

【问题讨论】：

答案取决于您打算支持的浏览器。对于大多数浏览器，您可以使用纯 CSS 来做到这一点，除了某些风格的 IE。
嗯 Internet Explorer 是我的主要关注点
但我想支持 firefox，它是一个内部站点，我们都使用 ie 8。
它真的需要一个动画来显示下拉菜单，还是只需要一个隐藏/显示实现就可以了？
简单的动画会很好，但没关系，我只是想学一些小步骤，然后研究更复杂的东西

标签： html css javascript menu navigation

【解决方案1】：

以下是使用吸盘鱼方法的示例：

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

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

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

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

祝你好运。

【讨论】：