纯HTML CSS制作导航栏 下拉菜单
Posted 曾某--智慧脑瓜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯HTML CSS制作导航栏 下拉菜单相关的知识，希望对你有一定的参考价值。
大一web网页设计，尝试更多炫酷页面内容，狠狠加分！！！！
话不多说，直接上代码
这是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>新人制作不易，求赞求收藏
以上是关于纯HTML CSS制作导航栏 下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
我用css定位了导航，怎么当网页下拉到一定高度的时候变成悬浮的？