Skip to content

Instantly share code, notes, and snippets.

@qichunren

qichunren/menu-demo.html

Created October 12, 2020 03:39
Show Gist options
  • Save qichunren/414b5b8ee0f400d4ad2a5de7f3947980 to your computer and use it in GitHub Desktop.
Save qichunren/414b5b8ee0f400d4ad2a5de7f3947980 to your computer and use it in GitHub Desktop.
Download ZIP
html纯css实现导航栏下拉菜单（带下拉三级菜单）
Raw
menu-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>庄稼汉</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
font-size: 14px;
font-family: 'Microsoft Yahei', '微软雅黑', 'Simsun', '宋体', 'Arial', sans-serif;
}
img {
border: 0;
}
a {
color: #fff;
text-decoration: none;
outline: none;
}
ol,
ul,
li {
list-style: none;
}
.head-nav {
width: 100%;
height: 60px;
background: #007130;
}
.head-nav-con {
width: 1200px;
height: 60px;
margin: auto;
}
.head-nav-con ul li {
width: 170px;
float: left;
font-size: 20px;
text-align: center;
}
.head-nav-con ul li:hover {
background: #ff9c01;
}
.head-nav-con ul a {
display: block;
text-decoration: none;
text-align: center;
line-height: 60px;
color: white;
}
.head-nav-con .drop-down {
position: relative;
}
.head-nav-con .drop-down-content {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background: #007130;
}
.head-nav-con .drop-down-content li:hover > a {
background-color: #ff9c01;
}
.head-nav-con .drop-down:hover .drop-down-content {
display: block;
}
.head-nav-con .drop-down-2 {
position: relative;
}
.head-nav-con .drop-down-content-2 {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background-color: #007130;
right: -170px;
top: 0;
}
.head-nav-con .drop-down-content-2 > li {
float: none;
background-color: #007130;
}
.head-nav-con .drop-down-content-2 li:hover a {
background-color: #ff9c01;
}
.head-nav-con .drop-down-2:hover .drop-down-content-2 {
display: block;
}
</style>
</head>
<body>
<div class="main">
<!--头部-->
<div class="header">
<div class="head-nav">
<div class="head-nav-con clearFloat">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">一级菜单</a></li>
<li class="drop-down"><a href="#">二级菜单</a>
<ul class="drop-down-content">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li class="drop-down"><a href="#">二级菜单</a>
<ul class="drop-down-content">
<li class="drop-down-2"><a href="#">三级菜单</a>
<ul class="drop-down-content-2">
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li class="drop-down-2"><a href="#">三级菜单</a>
<ul class="drop-down-content-2">
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li class=""><a href="#">二级菜单</a></li>
<li class=""><a href="#">二级菜单</a></li>
<li class=""><a href="#">二级菜单</a></li>
<li class=""><a href="#">二级菜单</a></li>
<li class="drop-down-2"><a href="#">三级菜单</a>
<ul class="drop-down-content-2">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment