HTML代码：
1
CSS代码：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #nav{ 6 background-color:#eee; 7 width: 350px; 8 height: 40px; 9 margin: 0 auto; /*居中*/10 } 11 #nav ul li{12 list-style: none; /*清除li样式*/13 }14 #nav ul li{15 float: left;16 /*padding: 0px 10px;*/ /*解决自适应问题，当li中文字内容过长时，会导致溢出。*/17 line-height: 40px; /*使文字居于中间位置*/18 text-align: center;19 position: relative; /*父级元素定位*/20 }21 a{22 text-decoration: none;23 color: #000;24 display: block; /*a标签是行内元素，现使其呈现为块级元素，这样鼠标移至上方，整个块的属性都会据hover变化*/25 padding: 0 10px; 26 height: 40px; 27 }28 a:hover{29 color: #fff;30 background-color: #666;31 }32 ul li ul li {33 float: none; /*清除样式*/34 background-color: #eee;35 margin-top: 2px;36 }37 ul li ul{38 position: absolute; 39 left: 0;40 top: 40px; /*相对于div的top*/41 display: none; /*下拉菜单不显示*/42 }43 ul li ul li a:hover{44 background-color:#b3d9d9; 45 }46 ul li:hover ul{47 display: block; /* 鼠标移至ul后显示下拉菜单*/48 }