html - 如何正确排列下拉菜单？

Question

这是我第一次做下拉菜单。我很困惑为什么我的下拉菜单表现得很奇怪。我只是想隐藏子菜单，以便在悬停时显示。

问题是当它悬停时，它会将导航分成两半。我不明白。这是一个 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*/
}

Answer 1

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

让下拉导航工作的解决方案出奇地简单，一旦你做了足够多的时间。

首先，你的父 li 需要是 position: relative:

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

然后，您的子导航需要是 position: absolute，并且您的 top/left 需要定位在父 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)。