ul.nav { overflow:hidden; margin:0; padding:0; list-style:none; border:1px solid #486B02; background:#8BD400; width:32em; margin:0 auto; } ul.nav li ul { list-style:none; margin:0; padding:0; } ul.nav li { float:left; width:8em; background:#8BD400; height:45px; line-height:45px; } /*去掉子菜单的左浮动*/ ul.nav li ul li { float:none; } /*为了隐藏子菜单*/ ul.nav li ul { /*为了确保下拉菜单中的菜单选项垂直对齐, 需要把列表的宽度设置为与列表项相同。*/ width:8em; display:none; position:absolute; /* 这里有一点需要注意,当不设置子级的position为“ absolute ”时,鼠标移动到父级, 出现的子级会在页面占据一定的位置,那么“ Page content here ”将会产生移动, 这是十分不好的。所以我们设置子级“ position:absolute; ”,这样便可以使它们脱离正常的流程, 影响后面的内容位置!*/ } /*关键地方 显示隐藏子菜单(设置left:-999em); 参考方法二*/ /*.nav li:hover ul { left:auto; } */ /*鼠标悬停显示子菜单*/ ul.nav li:hover ul { display:block; } ul.nav a { display:block; color:#2B3F00; text-decoration:none; padding-left:1em; border-right:1px solid #486B02; border-left:1px solid #E4FFD3; } ul.nav li li a { border-top:1px solid #E4FFD3; border-bottom:1px solid #486B02; boder-left:0; border-right:0; } /* 移除不希望的列表框 */ ul.nav li:last-child a { border-right:0; border-bottom:0; } ul a:hover,ul a:focus { color:#E4FFD3; background:#6DA203 }