【问题标题】：Modified CSS Drop down menu code修改 CSS 下拉菜单代码
【发布时间】：2014-04-08 06:46:17
【问题描述】：

谁能指出一个简单的 CSS 下拉菜单代码？我似乎在格式化部门找到的所有东西都非常活跃，而且通常是一个水平列表，这不是我想要的。

这是我的导航栏，当鼠标悬停在“画廊”链接上时，我希望最后 5 个链接（服装、艺术版画、giclee、电影、交易）从下拉，并在鼠标移出时消失。基本上是从“画廊”这个词垂直推出。这些都是 hashchange 链接，由类和段落 id 格式化。

谁能提供一个足够简单的代码来实现这一点？一些 webkit 效果也不会伤害任何人..

谢谢

【问题讨论】：

标签： css drop-down-menu navigation

【解决方案1】：

检查一下

DEMO

我在演示中添加了两个下拉菜单，分别是“关于”和“产品”。下面是使用的 HTML 和 CSS

<ul class="nav">
    <li><a href="">About</a>
        <ul>
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
        </ul>
    </li>
    <li><a href="">New</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Products</a>
        <ul>
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
        </ul>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding-left:0;
}
ul > li{
    position:relative;
}

a{
    text-decoration:none;
    color:lightgreen;
}

ul > li > a{
    font-size:20px;
}

ul ul{
    display:none;
    position:absolute;
    top:100%;
    padding:5px 10px;
    background-color:#ccc;
    z-index:2;
    list-style:none;
}



ul ul a{
    color:white;
}

【讨论】：

【解决方案2】：

通过css的简单下拉demo

ul, li{
    list-style: none;
    padding: 0;
    margin: 0;
}
ul{
    width: 100px;
}
li{
    width: 100%;
    position: relative;
}
li a{
    display: block;
    text-decoration: none;
    border:1px solid red;
}
li ul{
    display: none;

}
li ul li a{
    border:none;
}
li:hover ul{
    display: block;
}


<ul>
    <li>
        <a>Link One</a>
        <ul>
            <li><a href="">Sub link One</a></li>
            <li><a href="">Sub link two</a></li>
            <li><a href="">Sub link three</a></li>
            <li><a href="">Sub link four</a></li>
        </ul>
    </li>
        <li>
        <a>Link Two</a>
    </li>
        <li>
        <a>Link three</a>
        <ul>
            <li><a href="">Sub link One</a></li>
            <li><a href="">Sub link two</a></li>
            <li><a href="">Sub link three</a></li>
            <li><a href="">Sub link four</a></li>
        </ul>
    </li>
</ul>

【讨论】：