纯CSS3多级导航菜单效果代码
<!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> 相关推荐
nicepainkiller 2020-07-24
chensen 2020-11-14
lwnylslwnyls 2020-11-06
ATenhong 2020-10-15
yanzhelee 2020-10-13
佛系程序员J 2020-10-10
guojin0 2020-10-08
佛系程序员J 2020-10-08
bluewelkin 2020-09-16
wwzaqw 2020-09-04
zhongdaowendao 2020-09-02
favouriter 2020-08-18
奎因amp华洛 2020-08-15
一青年 2020-08-13
千锋 2020-08-10
nangongyanya 2020-08-09
dongxurr 2020-08-08
明天你好 2020-08-03
kyelu 2020-08-03