<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> body { background:#00CC99; } span.dropBottom,span.dropRight { display: block; box-shadow:inset 2px 0px 0px #FF9; position: absolute; left: 0px; width:100%; height: 100%; top: 0px; } span.dropBottom { box-shadow:inset 0px 2px 0px #FF9; position: absolute; width: 100%; bottom: 0px; } nav { display:table; margin:50px auto; box-shadow:0px 2px 0px #023333; } ul { margin:0; padding:0; list-style:none; } ul ul { opacity:0; position:absolute; top:160%; visibility:hidden; transition:all .4s ease; -webkit-transition:all .4s ease; } ul ul ul { top:0%; left:160%; } ul ul li:hover > ul { top:0%; left:100%; opacity:1; visibility:visible; } ul li:hover > ul { opacity:1; top:100%; visibility:visible; } ul li { float:left; position:relative; } ul ul li { float:none; } ul li { background-color:#009C75; cursor: pointer; } ul a { text-decoration:none; display:block; color:#FF9; padding:10px 15px; width:6em; text-align:center; font-family: 'Open Sans', sans-serif; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color:#007373; } ul li a:hover { background-color:#007373; } </style> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a><span class="dropBottom"></span> <ul> <li><a href="#">Design</a><span class="dropRight"></span> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a><span class="dropRight"></span> <ul> <li><a href="#">XTHML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a></li> <li><a href="#">Interviews</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
相关推荐
纯CSS3实现多级导航菜单是一款纯CSS3实现的炫酷多级下来菜单特效代码。
懒人原生纯css向右展开多级导航菜单代码
纯CSS3炫酷的多级导航菜单动画效果代码下载 纯CSS3炫酷的多级导航菜单动画效果代码下载 纯CSS3炫酷的多级导航菜单动画效果代码下载
一款纯CSS打造的黑色多级导航特效-下拉菜单代码,圆角黑色的菜单,支持两级子菜单,加上主菜单,一共最多显示三级,三级菜单可满足大部分网站的需求,本菜单基于CSS技术实现 ,无任何的的JS代码,而且兼容ie和火狐...
CSS3底部半圆形导航菜单代码,点击底部加号,会弹出一个半圆形的导航栏,不支持IE浏览器,支持chorme,firefox浏览器
纯CSS多级导航,代码超简介,很适合用户导航及多级菜单制作。
纯CSS3实现多级导航菜单是一款纯CSS3实现的炫酷多级下来菜单特效代码。
div+css 纵向三级导航菜单 html代码
jQuery css3黑色的多级导航菜单下拉列表代码 自己花5元钱下载的插件
这是一款基于Bootstrap和Bootsnav的多级导航菜单。该多级导航菜单通过简单的CSS代码来对菜单进行美化,制作鼠标滑过的动画效果。
纯css:hover伪类多级下拉菜单代码演示地址:http://www.777moban.com/Preview/28_198/
多级CSS3下拉菜单导航是一款基于CSS3和Javascript代码实现的清新响应式多级折叠下拉导航菜单。
一款扁平风格带字体图标的CSS3响应式多级下拉菜单导航代码,兼容手机端二级下拉菜单、三级下拉菜单、四级下拉菜单代码。
div+css多级实用导航菜单样式,兼容多种浏览器
多级CSS3下拉菜单导航是一款基于CSS3和Javascript代码实现的清新响应式多级折叠下拉导航菜单。
纯CSS实现的多级下拉鼠标点击显示导航菜单代码,想学css导航的可以下载看看!挺好的!
一款扁平风格带字体图标的CSS3响应式多级下拉菜单导航代码,兼容手机端二级下拉菜单、三级下拉菜单、四级下拉菜单代码。
纯CSS实现的多级下拉横向导航菜单代码
一个用纯css做的无限极导航,只有一个页面,简单,简洁,演示里面已经添加到9级菜单导航,还可增加更多,但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度,而当浏览器...
主要告诉大家如何打造最美CSS多级下拉横向导航菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下