1
這個下拉菜單有什麼問題，我的問題是如何將子菜單置於垂直位置，如何設置樣式並關閉子菜單，我試着用float：沒有;請幫忙？？？？？？？？？？？CSS下拉菜單（如何將子菜單放在垂直位置）
.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>