<!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>
下拉菜单——css方式实现二级菜单
最新推荐文章于 2024-08-24 09:00:00 发布