Question

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

问题在于，当它徘徊时，它会将导航器打破一半。我不明白。这是一个jsfiddle演示它，这是我的HTML＆amp; 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看起来很不错（内联样式除外 - 尽可能避免使用它们！）

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

首先，您的父母必须是position: relative：

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

然后，您的子导航必须为position: absolute，并且您的上/下需要位于父li中。顺便说一句，我建议在基本元素上设置除“Reveal”之外的所有内容，然后在悬停上设置“显示”样式：

#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）。

如何正确排列下拉菜单？

1 个答案: