css下拉菜单

css下拉菜单

.menu { 
font-family: arial, sans-serif; 
width:750px; 
margin:0; 
margin:50px 0; 
} 

.menu ul { 
padding:0; 
margin:0; 
list-style-type: none; 
} 

.menu ul li { 
float:left; 
position:relative; 
} 

.menu ul li a, .menu ul li a:visited { 
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:30px; 
color:#000; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c9c9a7; 
line-height:30px; 
font-size:11px; 
} 

.menu ul li ul { 
display: none; 
} 

.menu ul li:hover a { 
color:#fff; 
background:#b3ab79; 
} 
.menu ul li:hover ul { 
display:block; 
position:absolute; 
top:31px; 
left:0; 
width:105px; 
} 
.menu ul li:hover ul li a { 
display:block; 
background:#faeec7; 
color:#000; 
} 
.menu ul li:hover ul li a:hover { 
background:#dfc184; 
color:#000; 
} 

html部分

<div class="menu"> 
<ul> 
<li><a class="hide" href="#">菜单1</a> 
<ul> 
<li><a href="#">菜单11</a></li> 
<li><a href="#">菜单12</a></li> 
<li><a href="#">菜单13</a></li> 
<li><a href="#">菜单14</a></li> 
<li><a href="#">菜单15</a></li> 
<li><a href="#">菜单16</a></li> 
<li><a href="#">菜单17</a></li> 
<li><a href="#">菜单18</a></li> 
<li><a href="#">菜单19</a></li> 
</ul>  
</li> 
<li><a class="hide" href="#">菜单2</a> 

<ul> 
<li><a href="#">菜单21</a></li> 
<li><a href="#">菜单22</a></li> 
<li><a href="#">菜单23</a></li> 
<li><a href="#">菜单24</a></li> 
<li><a href="#">菜单25</a></li> 
<li><a href="#">菜单26</a></li> 
<li><a href="#">菜单27</a></li> 
</ul> 

</li> 
<li><a class="hide" href="#">菜单3</a> 

<ul> 
<li><a href="#">菜单31</a></li> 
<li><a href="#">菜单32</a></li> 
<li><a href="#">菜单33</a></li> 
<li><a href="#">菜单34</a></li> 
<li><a href="#">菜单35</a></li> 
</ul> 
</li>
<li><a class="hide" href="#">菜单4</a> 
<ul> 
<li><a href="#">菜单41</a></li> 
<li><a href="#">菜单42</a></li> 
<li><a href="#">菜单43</a></li> 
<li><a href="#">菜单44</a></li> 
<li><a href="#">菜单45</a></li> 
<li><a href="#">菜单46</a></li> 
<li><a href="#">菜单47</a></li> 
</ul>  
</li> 
<li><a class="hide" href="#">菜单5</a> 
<ul> 
<li><a href="#">菜单51</a></li> 
<li><a href="#">菜单52</a></li> 
<li><a href="#">菜单53</a></li> 
<li><a href="#">菜单54</a></li> 
<li><a href="#">菜单55</a></li> 
<li><a href="#">菜单56</a></li> 
<li><a href="#">菜单57</a></li> 
<li><a href="#">菜单58</a></li> 
<li><a href="#">菜单59</a></li> 
</ul>  
</li> 
<li><a class="hide" href="#">菜单6</a>  
<ul> 
<li><a href="#">菜单61</a></li> 
<li><a href="#">菜单62</a></li> 
<li><a href="#">菜单63</a></li> 
</ul> 
</li> 
<li><a class="hide" href="#">菜单7</a> 
<ul> 
<li><a href="#">菜单71</a></li> 
<li><a href="#">菜单72</a></li> 
<li><a href="#">菜单73</a></li> 
<li><a href="#">菜单74</a></li> 
</ul> 
</li> 
</ul> 
<div class="clear"></div> 
</div>