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>