2

这是我第一次做下拉菜单。我很困惑为什么我的下拉菜单表现得很奇怪。我只是想隐藏子菜单，这样当它悬停时，它就会显示出来。

问题是，当它悬停时，它会将导航分成两半。我不明白。这是一个演示它的jsfiddle，这是我的 HTML 和 CSS 导航代码：

HTML：

<ul id="nav">
    <li><a style="background-color:#000000;color:#FFFE41;text-decoration:none;font-weight:bold;" href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="history.html">Camera Phone</a></li>
    <li><a href="focus.html">Manual & Auto Focus</a></li>
    <li><a href="exposure.html">Exposure</a>
        <ul>
            <li><a href="iso.html">ISO</a></li>
            <li><a href="aperture.html">Aperture</a></li>
            <li><a href="shutterspeed.html">Shutter Speed</a></li>
        </ul>
    </li>
    <li><a href="whitebalance.html">White Balance</a></li>
    <li><a href="lowlight.html">Low Light</a></li>
    <li><a href="epilogue.html">Epilogue</a></li>
</ul>

CSS：

ul#nav {
    margin-top: -9px;
    /*put nav in the upper-top browser*/
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
}
#nav li {
    margin: 0;
    display: inline;
    /*display list horizontally*/
    margin-left: -4px;
    /*dense the links together*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    /*give space between links*/
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
}
#nav li > ul {
    display:none;
    /*hide the sub-nav menus*/
}
#nav li:hover > ul {
    /*display sub menus when hovered over*/
    display:block;
    position:relative;
    width:10%;
    left:61%;
    /*pushes the nav right under where the menu is*/
}
4

1 回答 1

4

您的 html 看起来不错（内联样式除外 - 尽可能避免使用它们！）

一旦你完成了足够多的时间，让下拉导航工作的解决方案非常简单。

首先，你的父母李需要是position: relative：

#nav li{
    margin: 0;
    display: inline; /*display list horizontally*/
    margin-left: -4px; /*dense the links together*/
    position: relative;
}

然后，您的子导航需要是position: absolute，并且您的顶部/左侧需要定位在父 li 内。顺便说一句，我建议在基本元素上设置除“显示”之外的所有内容，然后在悬停时设置“显示”：

#nav li > ul {
    display:block;
    position:absolute;
    width: 200px; /* Adjust as needed.  10% is now 10% of the parent li, so not enough */
    height: auto;
    left: -999em; /* this hides the menu when not hovered */
    top: 40px; /* adjust to match the height of the parent li */
}

#nav li:hover > ul{
   left: 0; /* show the menu when hovered */
}

最后，在导航方面，我喜欢使用display:inline-block而不是内联导航元素，以便您可以正确应用填充等。如果这样做，请记住使用IE7 hack（如果您打算支持IE7）。

于 2013-10-04T21:59:31.960 回答