Question

我计划进行一种新的下拉菜单样式，但我不确定如何操作，我希望它能够基本上降低容器。

我有点明白了，但我不确定该怎么做？

HTML：

<div id="header">
<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Enter</a></li>
    </ul>
</div>

CSS：

    a:visited, a:link, a:active {
    text-decoration: none;
    color: white;
}

#header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background-color: #4a8fbc;
}

div.nav {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin-left: 200px;
    margin-right: 200px;
    float: right;
    color: white;
    line-height: 50px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    margin: 0 30px 0 0;
}

li a:hover {
    color: #256690;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #7d7d7d;
    padding: 6px;
    text-decoration: none;
    background-color: #f2f2f2;
}

http://jsfiddle.net/UwRJ2/

Answer 1

这应该会给你一个良好的开端：

<强> DEMO

HTML：

<div id="header">
    <div class="nav">
        <ul>
            <li><a href="#">Home</a>
                <ul>
                    <li>lala</li>
                    <li>lala</li>
                    <li>lala</li>
                </ul>
            </li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Enter</a></li>
        </ul>
    </div>
</div>

CSS 我添加到您现有的代码中+我还将li元素的显示属性更改为display:inline-block;：

ul li > ul{
    display:none;
    border:1px solid red;
    color:red;
    position:absolute;
}

ul li:hover > ul{
    display:block;
}

CSS下拉菜单/容器？

1 个答案: