css下拉菜单效果

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<style> *{padding: 0; margin: 0;} .menu {} li { list-style-type: none; } .menu li {float: left; width: 100px; padding: 10px; margin: 5px; background-color: #ccc; cursor: pointer;} .menu li ul {display: none;} .menu li:hover ul{display: block;} .menu li ul li {clear: both; padding: 10px 0; margin: 0;}   </style>   <ul class="menu">     <li>         菜单一         <ul>             <li><a href="###">11111</a></li>             <li><a href="###">22222</a></li>             <li><a href="###">33333</a></li>         </ul>     </li>       <li>         菜单二         <ul>             <li><a href="###">444444</a></li>             <li><a href="###">555555</a></li>             <li><a href="###">666666</a></li>         </ul>     </li> </ul>