简单的 CSS 下拉菜单答案

【问题标题】：Simple CSS Dropdown简单的 CSS 下拉菜单
【发布时间】：2012-03-10 23:24:32
【问题描述】：

我在这方面做了一些尝试，但他们最终变得令人困惑。当前的 HTML 和 CSS 似乎适用于简单的水平 CSS 菜单。我正在努力从当前的 <li> 元素中删除子项。

我正在尝试让它们恰好显示在当前菜单项的下方，并具有与我现在的悬停效果相同的效果。任何援助将不胜感激。诚然，我不是 CSS 专业人士。

当前 HTML：

<div class="MenuTop">
    <ul class="Nav">
    <li><a href="Home.aspx" title="Home">Home</a></li>
        <li><a href="Vehicles.aspx" title="Vehicles">Vehicles</a>
            <ul>
                 <li><a href="SubItem.aspx" title="SubOne">SubItemOne</a></li>
            </ul>
        </li>
        <li><a href="About.aspx" title="About">About</a></li>
        <li><a href="Contact.aspx" title="Contact">Contact</a></li>
        <li><a href="News.aspx" title="News">News</a></li>
    </ul>   
</div>

当前的 CSS：

.MenuTop
{
    width: 960px;
    background-color: Black;
    color: #fff;
    margin: auto auto 0px auto;
    padding: 5px;
    height:auto;
    font-family: Segoe UI, Arial;
    font-weight:bold;
    min-height:15px;
}
.MenuTop ul
{
    float: left;
    list-style: none;
    margin: -5px ;
    padding: 0px;
}
.MenuTop li 
{
    float: left;
    font-size:12px;
    font-family: Segoe UI, Arial;
    margin: 0;
    padding: 0;
}
.MenuTop a 
{
    background-color: Black;
    color: #fff;
    display: block;
    float: left;
    margin: 0;
    padding: 4px 12px 4px 12px;
    text-decoration: none;
}
.MenuTop a:hover 
{
    background-color: #404040;
    color: #fff;
    padding: 4px 12px 4px 12px;
}

【问题讨论】：

您当前的 HTML 存在问题：没有子项目。没有什么可以“下拉”的，如果有的话，你还没有尝试为它写任何样式。
我尝试了几次，但它导致的问题多于帮助。我删除了它，所以这将是一个新的开始。我可以编辑它，但我认为这会更简单。感谢您指出显而易见的事情。
我加了一个。我可能会做错这一切，但我不知道如何实现它。我在网上看到的大多数不错的例子都是试图从他们的东西中获利。
查找超级鱼。出色的插件，为您做到这一点。我正在使用移动设备，否则我会修复您的代码
网络上的许多示例仍在尝试支持 IE6。如果你愿意，你可以从这篇文章中窃取我的代码，但看起来 Andres 已经覆盖了你：stackoverflow.com/questions/9134490/…

标签： html css drop-down-menu

【解决方案1】：

您已经很接近了，但是您忘记了将子菜单项绝对定位到您的父级 li 菜单项并通过使用 display:none 然后在悬停时显示它来隐藏它，所以尝试这样的操作达到那个效果：

CSS

.Nav li {
    position:relative;
}

.Nav li ul {
    display:none;
    position:absolute;
    top:30px;
}

.Nav li:hover ul {
    display:block;
}

另外，您的子菜单 ul 未正确关闭，请继续关闭它。

Ninja 编辑：demo，顺便说一句，您可以通过使用您给它的类 .Nav 而不是其容器的父类 .MenuTop 来正确定位您的菜单，从而大大受益您可以单独定位您的菜单和菜单，而不是您可能放置在该容器中的任何其他元素，

【讨论】：

效果很好。一个问题仍然存在。子项将出现在它们下方的内容后面。我希望他们永远处于领先地位。这是z-index的东西吗？想通了那部分......再次感谢
@Matt 是的，这是一个z-index 问题，您可以通过将z-index:9999 添加到您的子菜单项.Nav li ul 以及具有较低z-的position:relative 属性来解决此问题索引（例如 z-index:1; ）到您的内容容器。
当您将鼠标悬停在新出现的项目上时，下拉菜单似乎不会持续存在...如果您将
设置为可悬停项目而不是顶部菜单中的，则可以保留一切都使用纯 CSS。

@rfinz 专注于问题的下拉部分，但这是由于 a 元素的边距/填充。清理它，现在它工作得很好：jsfiddle.net/gKHDR/5

@Matt 清理了菜单的代码，所以请改用我最新的演示（还添加了一些东西，比如 clearfix）。

【解决方案2】：

我在 jsFiddle 上为您创建了一个有效的 example。

HTML如下：

<nav>
    <ul class="cf">
        <li><a href="#">Home</a></li>
        <li><a  href="#">Vehicles</a>
            <ul>
                <li><a href="#">Sub-menu Item 1</a></li>
                <li><a href="#">Sub-menu Item 2</a></li>
                <li><a href="#">Sub-menu Item 3</a></li>
            </ul>
            </li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
    </ul>
</nav>

和 CSS：

nav ul {
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;

}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}
nav a {
     font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

    display: block;
    font: bold 14px sans-serif;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
}


nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 1em;
    visibility: hidden;
    z-index: 1;
}

nav li:hover ul {
    opacity: 1;
    top: 1em;
    visibility: visible;

}
nav li ul li {
    float: none;
    width: 100%;
}
.cf:after, .cf:before {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

【讨论】：

您是否碰巧在 Chrome 之外的任何地方测试过这个？在FF10中看起来很糟糕。
不，但它可以很容易地适应跨浏览器
我假设这是您实际在某处使用的代码，而不是您为这个答案编写的代码，因此您绝对应该在 Firefox 中查看：jsfiddle.net/FBJAf