纯HTML CSS制作导航栏 下拉菜单
话不多说，直接上代码这是HTML部分:
<body>
<div>
<ul class="nav">
<li style="border-radius: 20px 0px 0px 0px;">智慧脑瓜
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>智慧脑瓜
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>首页
<ul>
<li></li>
</ul>
</li>
<li>智慧脑瓜
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li style="border-radius: 0px 0px 20px 0px;">智慧脑瓜
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
</body>
css样式设计：
<style>
*{
/* 去除页面边距 */
padding: 0;
margin: 0;
}
body{
/* 设置页面背景颜色 */
background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
/* 弹性布局 */
display: flex;
/* 居中 */
align-items: center;
justify-content: center;
}
.nav{
/* 整体框架大小位置 */
width: 100%;
height: 100%;
position: relative;
top: 300px;
}
.nav li{
/* 导航栏大小 */
width: 180px;
height: 60px;
/* 去浮动，使li横向布局 */
float: left;
/* 每个li之间间隙 */
margin-right: 10px;
/* 去点 */
list-style: none;
/* 背景颜色 */
background-color: gray;
/* 行高，使文本居中 */
line-height: 60px;
text-align: center;
/* 阴影，使导航栏有层次感 */
box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.3);
}
.nav li ul li{
/* 去点 */
list-style: none;
/* 下拉菜单大小 */
width: 170px;
height: 60px;
/* 去浮动，使li横向布局 */
float: left;
/* 背景颜色 */
background-color: chocolate;
/* 阴影，使导航栏有层次感 */
border: 5px rgba(0, 0, 0, 0.1) solid;
/* margin-top: 5px; 此代码可使下拉菜单有间隔，更美观，但无法实现hover效果*/
}
.nav li:hover{
/* 鼠标 */
cursor: pointer;
/* 背景颜色 */
background-color: #50536e;
/* 阴影，使导航栏有层次感 */
box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.6);
/* 执行时间 */
transition: .3s;
}
/* 隐藏 */
.nav li ul li{
display: none;
}
/* 显示 */
.nav li:hover ul li{
display: block;
transition: 0.3s;
cursor: pointer;
}
.nav li ul li:hover{
cursor: pointer;
background-color: sandybrown;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智慧脑瓜--下拉菜单</title>
<style>
*{
/* 去除页面边距 */
padding: 0;
margin: 0;
}
body{
/* 设置页面背景颜色 */
background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
/* 弹性布局 */
display: flex;
/* 居中 */
align-items: center;
justify-content: center;
}
.nav{
/* 整体框架大小位置 */
width: 100%;
height: 100%;
position: relative;
top: 300px;
}
.nav li{
/* 导航栏大小 */
width: 180px;
height: 60px;
/* 去浮动，使li横向布局 */
float: left;
/* 每个li之间间隙 */
margin-right: 10px;
/* 去点 */
list-style: none;
/* 背景颜色 */
background-color: gray;
/* 行高，使文本居中 */
line-height: 60px;
text-align: center;
/* 阴影，使导航栏有层次感 */
box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.3);
}
.nav li ul li{
/* 去点 */
list-style: none;
/* 下拉菜单大小 */
width: 170px;
height: 60px;
/* 去浮动，使li横向布局 */
float: left;
/* 背景颜色 */
background-color: chocolate;
/* 阴影，使导航栏有层次感 */
border: 5px rgba(0, 0, 0, 0.1) solid;
/* margin-top: 5px; 此代码可使下拉菜单有间隔，更美观，但无法实现hover效果*/
}
.nav li:hover{
/* 鼠标 */
cursor: pointer;
/* 背景颜色 */
background-color: #50536e;
/* 阴影，使导航栏有层次感 */
box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.6);
/* 执行时间 */
transition: .3s;
}
/* 隐藏 */
.nav li ul li{
display: none;
}
/* 显示 */
.nav li:hover ul li{
display: block;
transition: 0.3s;
cursor: pointer;
}
.nav li ul li:hover{
cursor: pointer;
background-color: sandybrown;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li style="border-radius: 20px 0px 0px 0px;">智慧脑瓜
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>智慧脑瓜
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>首页
<ul>
<li></li>
</ul>
</li>
<li>智慧脑瓜
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li style="border-radius: 0px 0px 20px 0px;">智慧脑瓜
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
页:
[1]