大一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制作导航栏 下拉菜单》对你有帮助，请点赞、收藏，并留下你的观点哦！
