下拉菜单之纯CSS实现方法(CSS小白第五期)
myzbx 2025-01-31 14:16 15 浏览
大家好，今天我们来分享一下用纯CSS实现下拉菜单效果的方法，首先我们看下效果图，如果你看过上一期的内容（CSS之垂直导航条）那么你就会发现，两者的外观主题基本一样，只不过结构稍微有些差别，所以今天我们主要讲构造，样式详解请参考上期内容
1.首先创建一个多层导航列表，本次只选取列表项中“Services”和“Products”两项为例。
2.基本设置：首先清除内边距和外边距，去掉列表默认的项目符号，关闭链接文本下划线.，给列表一个边框和背景颜色（根据自己需要）
* {margin:0;padding:0;}
ul.nav, ul.nav ul {list-style-type:none;
border：1px solid #486B02;
background-color:#8BD400;}
ul.nav a {text-decoration:none;}
3.为了使导航列表水平排列，我们可以浮动列表项，并给它设定一个宽度，为了确保下拉菜单与导航列表中的菜单项垂直对齐，需要将下拉菜单列表的宽度设置成与导航列表中列表项的宽度相同。
ul.nav li {float:left;
width:8em;}
ul.nav li ul {width:8em;}
4.关键部分：接下来我们设置下拉菜单的效果，在下拉菜单被激活之前它是隐藏状态的，因此我们可以将下拉菜单列表的position属性设置为absolute，然后给它定位到屏幕的左侧外面。当鼠标悬停到某个导航列表项的时候，使用：hover，把下拉菜单的位置再改回来，这样就可以实现下拉菜单的效果了。
ul.nav li {float:left;
width:8em;}
ul.nav li ul {width:8em;
position:absolute;left:-999em;}
ul.nav li:hover ul {left:auto;}
5.最后就是美化了，把导航链接设置为块级元素，然后修改列表的外观，设置背景颜色和斜面边框效果，（此处可参考上期详解内容）
/*斜面框效果*/
ul.nav a {display:block;
color:#2B3F00;
text-decoration:none;
padding:0.3em 1em;
border-right:1px solid #486B02;
border-left:1px solid #E4FFD3;}
ul.nav li li a {border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;
border-left:0;
border-right:0;}
/*移除重叠的边框*/
ul.nav li a.re {border-right:0;}
ul.nav ul {border-bottom:0;}
/*鼠标悬停效果*/
ul a:hover {color:#E4FFD3;
background-color:#6DA203;}
PS：半夜写的没怎么检查，如有漏洞请告知，谢谢！
相关推荐
- MORROR ART:毫无音质可言，真的只是好看而已...
-
今天早上我在微博上发了一条短视频，内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品，但她嫌在家里放着没用，所以拿到公司里做我们的拍摄道具...
- 「JS优化篇」你的 if - else 代码肯定没我写的好
-
作者：小生方勤转发链接：https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化，我在代码中看到一连串的if(){}el...
- 细聊微内核架构在前端的应用「干货」
-
作者：semlinker转发链接：https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构（Microke...
- ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?
-
导读：最近我购置了一台新的电脑，硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制，都使得在未来3-5年内，这个电脑会被淘汰。但是，基于云APP的使用，老的电脑是足够了，而且，我们也...
- 推荐三款正则可视化工具「JS篇」（正则在线调试）
-
作者：代码先森转发链接：https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如，算法可视化、正则可视化、Vue数据劫持可...
- Javascript 多线程编程的前世今生
-
作者：jolamjiang腾讯技术工程转发链接：https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...
- Pug 3.0.0正式发布，不再支持 Node.js 6/8
-
作者：李俊辰前端之巅转发链接：https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日，Pug3.0.0正式发布，Pug原名Jade，是由...
- 36个工作中常用的JavaScript函数片段「值得收藏」
-
作者：Eno_Yao转发链接：https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的...
- 深入JavaScript教你内存泄漏如何防范
-
作者：大道至简转发链接：https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下，忽视内存管理不会对传统的网页产生显著的后果。这是因为，用户刷新...
- 由浅入深，66条JavaScript面试知识点(七)
-
作者：JakeZhang转发链接：https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深，66条JavaScript面试知识点（一）由浅入深，66...
- 用STM32做了个电子秤，成本仅两位数，精度高!解析一下原理
-
俗话说得好！人在胖，秤在看！所以，我想DIY一个精度高的体重秤！并希望它不只能称体重：还能像这样称克重（可设置KG，G，最低可称100克）……这样一来，做甜品的时候，还能拿来应应急。保姆级教程，记录在...
- 前端开发需要了解常用7种JavaScript设计模式
-
作者|Deven译者|王强策划|小智转发链接：https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...
- 毛姆的一个手法|王培军（毛姆作品简介）
-
鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说：“具体的把当前风物比拟为某种画法或某某大画家的名作”，是“从文同正式起头”。如钱先生所举的：“峰峦李成似，涧谷范宽能”，“独坐水轩人不到...
- 欣赏 | 朝戈:我渴望找到直达心灵的永恒
-
朋友，通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...
- Web页面如此耗电!到了某种程度，会是大损失
-
现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说，电池寿命都很重要。在这篇文章里，我们将讨论影响电池寿命的因素，以及作为一个web开发者，我们如何让网页耗电更少，以便用户有更多时间来关注我们的...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)