Question

那么如何使用此css制作下拉菜单？尝试了一些tuts，但有了这个css我无法获得任何下拉工作;（。

CSS：

.main {
    list-style: none;
    margin: 0;
    margin-bottom: 100px;
    padding: 0px;
    height: 44px;
    text-decoration: none;
    background-color: #171a21;
    width: 100%;
    text-align: left;
    font-size: 18px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 6, 0, 0.45);
    -moz-box-shadow: 0px 0px 8px rgba(0, 6, 0, 0.45);
    box-shadow: 0px 0px 8px rgba(0, 6, 0, 0.45);
}
.main li {
    float: left;
    padding: 16px;
    margin: 0;
    line-height: 17px;
    height: 16px;
    margin-bottom: -6px;
    margin-left: 45px;
    list-style:none;
}
.main p {
    float: left;
    margin: 0;
    padding: 0;
    line-height: 17px;
    height: 44px;
    margin-bottom: -6px;
}
.main a {
    display: block;
    color: #b8b6b4;
    text-decoration: none;
    transition: all linear 0.15s;
}
.main a:hover  {
    display: block;
    color: white;
    text-decoration: none;
}

HTML：

<ul class="main">
    <li><a href="#">Test</a>
        <ul>
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
</ul>

我刚开始使用html＆amp; css并制作网站。谢谢你的帮助;）。

Answer 1

选中此Fiddle:

关键在于CSS代码：

.main li ul {
    display: none;
}
.main li:hover > ul {
        display: block;
}

应该是非常自我解释。

Answer 2

将这些行添加到您的css文件中：

.main li ul {display: none;}
.main li:hover ul {display: block;}

使用此css导航的下拉菜单

2 个答案: