css下拉菜单效果

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