html - 导航栏动画

我在订购导航栏时遇到问题。我想制作水平样式的导航栏，但它现在就像一张 table ! 我在: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 &#9660; </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 &#9660;</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>

我的 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;
}

最佳答案

只需两步:

要避免表格效应:将所有列表放在同一个 div 下，而不是像现在这样放在两个不同的 div 下。
要将所有菜单项放在同一高度，请将 vertical-align:top; 添加到 navigation 类。

你可以看到它在这里工作:http://jsfiddle.net/0essn7yv/ (我将宽度从 250px 更改为 150px，以使菜单更适合小屏幕)。

关于html - 导航栏动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26706665/

html - 导航栏动画

上一篇：javascript - Python Web 服务器 HTML 渲染

下一篇：css - 仅适用于 Chrome 的 AutoCompleteExtender 定位