二级菜单 用html+css完成一个鼠标移动上去实现二级菜单的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*静态页面样式设置开始*/ /*一级菜单样式设置开始*/ *{margin:0px;padding:0px;} #nav{background-color:#eee;width:600px;height:40px;margin:0 auto;} #nav ul{list-style:none;} #nav ul li{float:left;line-height:40px;text-align:center;} /* text-decoration:nono;————实现了<a>标签的默认样式为零 text-align:center;实现了<a>标签的样式文字居中 display:block;————一定一定一定要设置，因为只有把<a>标签的display属性设置为block，才能对<a>标签进行样式的设置 */ #nav a{text-decoration: none;display: block;padding:0 10px;color: #000;} #nav a:hover{color: #ccc;background-color: #ddd;} /*一级菜单样式设置结束*/ /*二级菜单设置样式开始*/ /* 肯定肯定肯定要设置ul li ul的position属性值为absolute,这样一级菜单的宽度将二级菜单的不受影响 ul li ul li{margin-top设置值导致的问题是，当鼠标滑到二级菜单下面时会退出二级菜单,所以应该用border-top来代替} */ #nav ul li ul li{float: none;background-color: #eee;margin-top: 0px;border-top: 2px solid #fff;} #nav ul li{position: relative;} #nav ul li ul{position: absolute;left: -145px;height: 40px;} #nav ul li ul li a:hover{background-color: #ddd;} /*二级菜单设置样式结束*/ /*静态页面设置样式结束*/ /*CSS方法实现二级菜单的显示和隐藏开始*/ #nav ul li ul{display: none;} #nav ul li:hover ul{display: block;} /*CSS方法实现二级菜单的显示和隐藏结束*/ /*浏览器兼容性测试开始*/ #nav a{height: 40px;} #nav ul li ul li a{width: 500px;} /*浏览器兼容性测试结束*/ </style> </head> <body> <div id="nav"> <ul> <li><a href="#">菜单1</a> <ul> <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li> <li><a href="#">3级</a></li> <li><a href="#">4级</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul> <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li> <li><a href="#">3级</a></li> <li><a href="#">4级</a></li> </ul> </li> <li><a href="#">菜单3</a> <ul> <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li> <li><a href="#">3级</a></li> <li><a href="#">4级</a></li> </ul> </li> <li><a href="#">菜单4</a> <ul> <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li> <li><a href="#">3级</a></li> <li><a href="#">4级</a></li> </ul> </li> <li><a href="#">菜单5</a> <ul> <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li> <li><a href="#">3级</a></li> <li><a href="#">4级</a></li> </ul> </li> <li><a href="#">菜单6</a> <ul> <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li> <li><a href="#">3级</a></li> <li><a href="#">4级</a></li> </ul> </li> </ul> <div> </body> </html>鼠标移动上去的效果
