带有此 css 的导航下拉菜单

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&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 的导航下拉菜单

Dropdown menu for nav with this css

css

nav