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

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

一个纯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

网页特效

带左右箭头控制的网站幻灯片轮播切换效果

一款比较实用的带左右箭头按钮控制的jquery slider图片插件，网站幻灯片焦点图片轮播切换代码下载。页面代码非常简洁，适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

江山如画
2019年4月10日
12.5K07
网页特效

立体动画按钮、切换开关

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

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

纯css实现的三级下拉导航菜单

非常简洁的一个三级导航菜单，纯css实现，适用于企业产品分类导航等，代码精简，兼容所有浏览器。 See the Pen 纯css实现的三级下拉导航菜单 by 江山如画 (@jgyzhr)on CodePen.

江山如画
2019年11月1日
7.9K00
网页特效

垂直（纵向）二级导航菜单

CSS+JS制作的垂直（纵向）二级导航菜单，可灵活修改。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS+JS制作的垂直（纵向）二级导航菜单|www.125jz.com</title> &…

江山如画
2018年9月19日
10.7K01
网页特效

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

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

江山如画
2018年7月26日
6.9K01
网页制作

导航特效：jquery实现当前（活动）菜单样式变化

用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。当前（活动）菜单样式变化实现原理在html代码中给首页（默认选中）加上class名cur <a href=…

江山如画
2018年2月8日
3.6K00

发表回复

登录后才能评论