0
我遇到问题订购我的导航栏。我想制作横向导航栏，但现在就像一张桌子！我在http://cssdeck.com/labs/navigation-dropdown-with-flip-effect中发现了这种导航栏，但它没有显示如何使用该效果制作完整的水平导航栏。同时，我需要补充一点，我想让我的主页和关于部分免费下拉列表！我该如何解决它？导航下拉展开效果内联无无下拉列表前两部分
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1"><a href="#">item #1</a></li>
<li class="n2"><a href="#">item #2</a></li>
<li class="n3"><a href="#">item #3</a></li>
<li class="n4"><a href="#">item #4</a></li>
<li class="n5"><a href="#">item #5</a></li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1"><a href="#">item #1</a></li>
<li class="n2"><a href="#">item #2</a></li>
<li class="n3"><a href="#">item #3</a></li>
<li class="n4"><a href="#">item #4</a></li>
<li class="n5"><a href="#">item #5</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
My Css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
但它变成了这个样子：http://puu.sh/cAXuB/67b203435d.png – 2014-11-02 23:36:57
我希望我的绿色底裤变得水平，而不是像我的选项一样！ – 2014-11-03 01:31:34