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

Question

Whats wrong with this dropdown menu, my question is how to put submenu in a vertical position, how to style and turn off submenu float off, I tried with float:none; please help???????????

 .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

You can nest a <div> with CSS display:none inside another <div> . Then, have the hidden <div> show when hovered over

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

 <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>