下拉菜单之CSS实现

最新推荐文章于 2023-02-22 11:00:39 发布

jacelynfish

最新推荐文章于 2023-02-22 11:00:39 发布

阅读量512

点赞数

本文链接：https://blog.csdn.net/souzy/article/details/50723961

版权

CSS技术要点

位置：

一级菜单中当导航栏是横向导航，设置li的float为left；二级菜单中纵向导航，设置li的float为none(不能设置clear:both)

以及菜单中的li标签position设置为relative，二级菜单中的ul的position属性设置为absolute，top为一级菜单的高度，left为0

在a标签中：

1. a标签的display属性要设置为block

2. 宽和高：高度在最顶层ul中设置；宽度设置为自适应，用padding: 0 10px实现

3. 要让a标签的文字上下居中，将a的line-height的值设置为顶层ul标签中的height的值；因为是宽度自适应，所以左右居中不用设置

4. 其他所有视觉效果的实现，均在a标签中产生，如background-color, text-decoration, color等属性

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="CSS/1.css">
	<script src="index.js"></script>
</head>
<body>
	<div id="nav">
		<ul class="first-nav">
			<li><a href="javascript:;" >home</a>
			<ul class="second-nav home">
					<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
					<li><a href="javascript:;">JQuery</a></li>
				</ul>
			</li>
			<li><a href="javascript:;" >kecheng</a>
				<ul class="second-nav kecheng">
					<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
					<li><a href="javascript:;">JQuery</a></li>
				</ul>
			</li>
			<li><a href="javascript:;" >learn</a>
			<ul class="second-nav learn">
					<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
					<li><a href="javascript:;">JQuery</a></li>
				</ul>
			</li>
			<li><a href="javascript:;" >hhhh</a>
			<ul class="second-nav hhhh">
					<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
					<li><a href="javascript:;">JQuery</a></li>
				</ul>
			</li>
			<li><a href="javascript:;" >aboutus</a>
			<ul class="second-nav aboutus">
					<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
					<li><a href="javascript:;">JQuery</a></li>
				</ul>
			</li>
		</ul>
	</div>

	
</body>
</html>

CSS（SASS实现）已用CSS reset除去默认设置

ul.first-nav {
	width: 500px;
	height:40px;
	margin:0 auto;
	
	li{
		float:left;
		position: relative;

		a{
			background-color: #eee;
			display: block;
			padding: 0 10px;
			text-decoration: none;
			color:black;
			line-height: 40px;
			text-align: center;
		}

		a:hover{
			background-color: black;
			color: white;
		}

	
		ul.second-nav{
			position: absolute;
			top: 40px;
			left: 0;
			display: none;

			li{

				float: none;
				margin-top: 2px;

				a:hover{
					background-color:blue;
				};
			}
		}

	}

	li:hover{
			ul.second-nav{
				display: block;
			}
		}
}