<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<style> | |
* { | |
margin: 0px; | |
padding: 0px; | |
} | |
li{ | |
list-style:none; | |
} | |
.parent{ | |
float: left; | |
} | |
li a{ | |
display: inline-block; | |
width: 200px; | |
height: 50px; | |
text-decoration: none; | |
text-align: center; | |
line-height: 50px; | |
background: blue; | |
color: #fff; | |
} | |
li .home{ | |
background: red; | |
} | |
.child{ | |
display: none; | |
} | |
.parent:hover .child{ | |
display: block; | |
} | |
.child li a:hover{ | |
background: yellow; | |
} | |
</style> | |
</head> | |
<body> | |
<ul> | |
<li class="parent"> | |
<a href="#" class="home">首页</a> | |
<ul class="child"> | |
<li><a href="#">企业信息</a></li> | |
<li><a href="#">企业动态</a></li> | |
<li><a href="#">企业招聘</a></li> | |
<li><a href="#">关于我们</a></li> | |
<li><a href="#">联系我们</a></li> | |
</ul> | |
</li> | |
</ul> | |
</body> | |
</html> |
导航栏(nav)
最新推荐文章于 2023-12-28 17:20:17 发布