修改后的CSS下拉菜单代码

Question

有人能指点我一个简单的CSS下拉菜单代码吗？我似乎发现的所有东西在格式化部门都非常过分，而且通常是一个水平列表，这不是我想要的。

这是我的Navbar，我希望最后5个链接（服装，艺术品，giclee，电影，交易）从悬停在“画廊”链接上时下拉，并在onmouseout时消失。基本上是从“画廊”一词垂直展开。这些都是hashchange链接，由类和段ID组成。

任何人都可以帮助一个简单的代码来实现这一目标吗？一些webkit效果也从未伤害过任何人......

由于

Answer 1

通过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>

Answer 2

检查

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;
}