用css创建的二级菜单

最新推荐文章于 2021-07-02 04:49:34 发布

gyafdxis

最新推荐文章于 2021-07-02 04:49:34 发布

阅读量597

点赞数

分类专栏： html css js浅尝

本文链接：https://blog.csdn.net/GyafdxIs/article/details/45092873

版权

html css js浅尝专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title></title>
<link href="company.css" rel="stylesheet" style="text/css">
</head>
<body>
<div class="navation">
	<ul>
		<li>
			网站首页
			<div>
				
				<div><a href="#">门户</a></div>
				<div><a href="#">技术</a></div>
				<div><a href="#">园地</a></div>
			</ul>
		</li>
		
	</ul>
</div>
</body>
</html>

.navation{
width:400px;
height:40px;
border:1px solid 400px;
}

.navation>ul>li{
float:left;
margin:4px 0px 4px 0px;
text-align:center;
vertical-align:center;
list-style:none;
display:inline;
}

.navation>ul>li>div{
position:absolute;
display:none;
}
.navation>ul>li>div>div{
float:none;
margin:1px 1px 1px 1px;
list-style:none;
border:4px solid blue;
background:red;
}


.navation>ul>li:hover div{
display:block;
}

这里的主要思想是就是把二位菜单装在一个容器里面，一般是display：none；然后在显示的时候display:block;

其实这里用ul和li好一些我为了大家好理解用了 div和div就这么简单的东西。