导航特效：纯css制作三级下拉导航菜单

江山如画 • 2018年2月9日上午10:34 • 网页特效 • 阅读 6622

一个纯CSS制作的三级导航菜单，代码非常精简，兼容各主流浏览器，是学习CSS，制作网站导航非常好的实例。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯css实现三级导航菜单|www.125jz.com导航特效</title> <style type="text/css"> /*核心样式实现三级导航的效果*/ .dropdown,.dropdown li,.dropdown ul { list-style: none; margin: 0; padding: 0;} .dropdown { position: relative; z-index: 597; float: left;} .dropdown li { float: left; vertical-align: middle; zoom: 1;} .dropdown li.hover,.dropdown li:hover { position: relative; z-index: 599; cursor: default;} .dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;} .dropdown ul li { float: none;} .dropdown ul ul { top: 1px; left: 99%;} .dropdown li:hover > ul { visibility: visible;} /*核心样式实现三级导航的效果*/ /*辅助样式 */ .my_nav{font-size:16px; background: #060; height:50px; line-height:50px;} .my_nav li{border-right:1px solid #fff;} .my_nav ul{background: #090;} .my_nav ul li:hover{background: #F00;color:#555;} .my_nav ul li ul li{background: #090;color:#555;} .my_nav ul,.my_nav li{width:120px; text-align:center;} .my_nav a{text-decoration:none;color:#fff;} </style> </head> <body> <nav> <ul class="dropdown my_nav"> <li><a href="http://www.125jz.com">首页</a></li> <li><a href="#">web前端</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a> <ul> <li><a href="#">CSS入门</a></li> <li><a href="#">CSS实例</a></li> <li><a href="#">CSS3动画</a></li> </ul> </li> <li><a href="#">JS</a></li> </ul> </li> <li><a href="#">网页设计</a></li> <li><a href="#">网站建设</a></li> <li><a href="#">在线问答</a></li> </ul> </nav> </body> </html>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1176.html

赞 (0)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

UEditor编辑器如何设置代码高亮？

上一篇 2018年2月9日上午10:08

两个非常简单的JS图片无缝滚动代码

下一篇 2018年2月9日上午11:30

网页特效

点击按钮发送验证码，隔10秒再次发送倒计时效果-JS代码

为了防止用户恶意获取短信验证码或邮箱验证，在网站制作时会考虑在点击获取验证码的按钮上做个倒计时的效果。需要隔10秒再次发送，实现这个功能，需要用到setInterval和clearInterval。 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearIn…

江山如画
2019年10月31日
4.5K00
网页特效

纯CSS制作三级导航菜单

本文分享如何使用纯CSS制作三级导航菜单，优点：代码简洁，速度快。 HTML代码： <!–代码部分begin www.125jz.com–> <div class=”menu”> <ul class=”nav1″> <li class=”li1″><a href=”http://www.125jz.c…

江山如画
2018年8月2日
2.8K00
网页特效

立体动画按钮、切换开关

实例名称：立体动画按钮、切换开关在线预览：https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码： <div id=”app”></div> CSS代码： body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

江山如画
2019年10月17日
4.6K00
网页特效

如何去除导航栏最后一个不需要的分隔线

网页导航栏制作时，菜单项之间常用1像素细线做分隔，如上图。给菜单栏菜单项添加分隔线代码如下： /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了，如何处理呢？去除最后一个菜单项右边的分隔线，代码 /* 移除分隔线 */ .nav li:last-…

江山如画
2018年7月26日
5.6K01
网页特效

简单纯js实现的网页tab选项卡切换效果

今天给大家分享一款非常简单实用的JS网页tab选项卡切换效果，当鼠标放到不同的标签项上或单击该栏目标签会显示不同的内容。

江山如画
2018年2月12日
2.6K00
网页特效

CSS+JS制作纵向点击展开的二级导航菜单

网页制作时，如产品分类目录、导航等，需要制作纵向二级导航菜单，点击展开分类显示子目录，再点击收缩起目录。中国网页设计分享的二级导航菜单使用CSS+JS制作，调用简单方便，可移植、可修改。网页HTML代码（放在body区域）： <div id=”my_menu” class=”sdmenu”> <div> <span>教…

江山如画
2018年9月19日
3.9K00

发表回复

登录后才能评论