纯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制作导航栏下拉菜单相关推荐

html纯css实现导航栏下拉菜单（带下拉三级菜单）
本文转载于:https://blog.csdn.net/qq_30449567/article/details/80548720 <!DOCTYPE html> <html lang ...
dw添加下拉菜单_怎样用dw制作导航栏下拉菜单
一.工具:dw工具二.操作步骤: [1]打开dw软件,新建立一个新的文件. [2]点击常用,选择布局,绘制一个层. [3]再点击层,再绘制一个.可以看到,第一个层是layer1,第二个是layer2 ...
HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作？这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧我们要说的是html导航栏下拉菜单的制作,先看 ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
纯CSS实现导航栏下拉动画效果
实现思路导航栏的下拉效果通过在ul的li里再嵌套一个ul,再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果.老铁没毛病. 实现效果: HTML代码 <div cla ...
导航栏下拉菜单的制作
导航栏 , 下拉菜单的制作代码示范 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
html 下拉导航栏源码,html导航栏下拉菜单怎么制作？这里有详细的代码实例
元素来包裹这些元素,并使用CSS来设置下拉内容的样式. html导航栏菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用posi ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
导航栏下拉菜单效果代码
导航栏,菜单栏下拉简单实现先看看效果图 <!-- jQuery Drop-down Menu/Navigation bar Copyright 2017-9-21, Jachin QQ: 38 ...

纯HTML CSS制作导航栏下拉菜单

纯HTML CSS制作导航栏下拉菜单相关推荐

最新文章

热门文章

纯HTML CSS制作导航栏 下拉菜单

纯HTML CSS制作导航栏 下拉菜单相关推荐

最新文章

热门文章

纯HTML CSS制作导航栏下拉菜单

纯HTML CSS制作导航栏下拉菜单相关推荐