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

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

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

网页特效

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

简单的marquee标签可以实现文字或图片滚动，但是会有空白，不连续。本文分享两个非常简单，使用JS实现的图片无缝滚动代码。

江山如画
2018年2月9日
8.1K00
网页制作

中国省、市区二级联动下拉选择框-JS源码

中国省、市区二级联动下拉选择框，包含所有省份及市县信息。当选择省份下拉选择框时，市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”，市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里（js/common.js），中国网页设计在js文件里定义了两个数组，分别存放省份和对应的市区。 //省份 var pr…

江山如画
2019年6月5日
8.5K01
网页特效

JS+CSS实现点击弹出窗口，带关闭按钮（非常简单）

最近做网页设计项目，要求点击图片后弹出窗口，在新弹出窗口中播放视频。从网上找了很多代码，要么非常复杂，要么兼容性有问题，反复对比多种实现方法，最后确定代码如下： <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″/> <title>JS+CSS实现…

江山如画
2018年5月9日
8.6K00
网页制作

纯CSS制作红色网站二级下拉导航菜单

纯CSS制作红色网站二级下拉导航菜单，代码非常简洁，适合修改后使用，入门就能掌握。二级下拉导航菜单HTML代码： <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

江山如画
2019年4月17日
13.7K04
网页特效

100种精美的网页时钟特效，总有一款是你需要的

web骇客收集了100种使用CSS+JS+HTML制作的时钟、钟表、手表等特效，分为漂亮的时钟特效、有创意的时钟、电子钟，每一种实现都提供源代码，可以方便网页制作爱好者们拷贝使用，如果你需要在网页中添加时钟特效，在这里一定会有一款你喜欢的。

江山如画
2018年9月27日
11.0K05
网页特效

超酷的HTML5 3D图片旋转动画特效

中国网页设计分享的一款HTML5 3D图片动画特效，使用js动画框架TweenMax 技术实现。这款HTML5 3D动画非常酷，当在图片上面拖动鼠标时，图片会在垂直方向分裂出数块小长方体，然后每一个小长方体沿着鼠标拖动的方向旋转。效果演示源码下载

江山如画
2018年9月28日
19.7K00

发表回复

登录后才能评论