文单阅读

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <title>超炫酷纯CSS3 3D折叠二级下拉菜单DEMO演示</title>
  
  
<style type="text/css">
* {
   margin: 0; 
padding: 0;
box-sizing: border-box;
}

body {
padding: 30px; 
font-family: "Helvetica Neue", helvetica, arial; 
background: url('https://subtlepatterns.com/patterns/white_carbonfiber.png');
}

#container {
position: relative;
width: 940px;
}

#container:after {
content: "";
display: block;
clear: both;
height: 0;
}

#menu {
position: relative;
float: left;
width: 100%;
padding: 0 20px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #ccc; 
}

#menu, #menu ul {
list-style: none;
}

#menu > li {
float: left;
position: relative;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
perspective: 1000px;

}

#menu > li:first-child {
border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menu a {
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-weight: 600;
font-size: 12px;
letter-spacing: -.05em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;

}

#menu > li:hover > a {
background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}

#menu li ul  {
position: absolute;
left: 0;
z-index: 1;
width: 200px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}


#menu li:hover ul {

padding: 15px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;

}

@keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}

30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}

65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}

100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}

#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}

#menu li li a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}
</style>

  
</head>

<body style="padding: 300px 0px 0px 300px;">

  <div id="container" >
<ul id="menu">
  <li><a href="#">码蝗网下载</a>
<ul>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
</ul>
</li>
<li><a href="#">码蝗网下载</a>
<ul>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
</ul>
</li>
<li><a href="#">码蝗网下载</a>
<ul>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
</ul>
</li>
<li><a href="#">码蝗网下载</a>
<ul>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
<li><a href="#">码蝗网下载</a></li>
</ul>
</li>
<li><a href="#">码蝗网下载</a></li>
</ul>
</div>

</body>

</html>
不一样的特效菜单
