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

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

一个纯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实现当前（活动）菜单样式变化

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

江山如画
2018年2月8日
6.4K00
网页制作

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

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

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

纯css制作简洁的绿色导航菜单

css制作简洁的绿色导航菜单，代码非常简单，背景颜色和背景图片换下，即可满足大多数导航菜单需要。导航菜单所需图片素材：导航菜单HTML代码： <div id=”nav”> <ul> <li><a href=”http://www.125jz.com/”>首页</a></li> &lt…

江山如画
2018年2月26日
4.2K00
网页特效

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

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

江山如画
2018年5月9日
8.7K00
网页特效

精美的滑出式水平导航特效

一个精美的滑出式水平导航特效，打开页面只能看到文本链接，用户将鼠标悬停于标签上时，该导航菜单项目会滑出。预览下载源码 1、HTML结构导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

江山如画
2018年2月6日
4.7K00
网页特效

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

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

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

发表回复

登录后才能评论