css 导航菜单-蒲公英云

css 导航菜单

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子

<body> <div id="top"> <div id="logo"><img src="images/22102.png" width="196" height="90" /></div> <div id="menu"> <ul> <li>网站首页</li> <li>宁静致远 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>关于我们 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>净心枕芯 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>在线订购</li> <li>人才招聘</li> <li>联系我们</li> </ul> </div> </div> </body>

css部分实现鼠标经过显示二级菜单

<style> *{ margin:0px; padding:0px; } #top{ width:950px; height:800px; margin:10px auto; } #logo{ width:196px; height:90px; float:left; } #menu{ width:700px; height:90px; float:right; margin-top:20px; } #menu ul li{ float:left; width:100px; line-height:50px; text-align:center; list-style:none; } #menu li:hover{ background:#066; } #menu ul li ul li{ background:#99C; height:35px; line-height:38px; } #menu ul li ul li:hover{ background:#0C0; } #menu ul li ul{ display:none; } #menu ul li:hover ul{ display:block; } #menu ul li ul{ } </style>