CSS下拉菜单（如何将子菜单置于垂直位置）

Question

这个下拉菜单有什么问题，我的问题是如何将子菜单放在垂直位置，如何设置样式并关闭子菜单浮动，我尝试使用float：none;请帮忙????????????

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

nav {
    background: #916a31;
    height: 2.3em;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

ul {
    background: #d5973c;
    height: 2em;
    width: 100%;
}

li a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    color: #fff;
    text-decoration: none;
}

li a:hover {
    background: #916a31;
    height: 2em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
}

.curent,
a:hover.curent {
    background: #ad9b7f;
    color: #eee;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
    border-bottom: .3em solid #917f63;
}


ul.submenu {
    float: none;
    background: #916a31;
    width: auto;
    height: auto;
}

ul.submenu li {
    float: none;
}

ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}

ul.submenu li:last-child a {
    border-bottom: none;
}

<nav class="cf">
    <ul>
        <li> <a href="#" class="curent">Home</a> </li>
        <li> <a href="#">News</a>
            <ul class: "submenu">
                <li> <a href="#">Podmeni1</a> </li>
                <li> <a href="#">Podmeni2</a> </li>
                <li> <a href="#">Podmeni3</a> </li>
            </ul>
        </li>
        <li> <a href="#">About</a> </li>
        <li> <a href="#">Contact</a> </li>
    </ul>
</nav>

Answer 1

您可以将<div>与CSS display:none嵌套在另一个<div>中。然后，悬停在

上时显示隐藏的<div>

＆＃13;

＆＃13;

.dropdown-content {
    display: none;
}

.dropdown:hover .dropdown-content {
    display: block;
}

＆＃13;

<div class="dropdown">
    <span>Mouse over me</span>
    <div class="dropdown-content">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;