这只是我正在建造的导航栏的原型，我想过在3d方面有一个旋转的导航栏。这一切都运行良好和精细，除了如果鼠标在旋转后悬停在某些区域上的部分，它不应该开始向后旋转（一个区域是第二个白色条左边的几个像素，当悬停在下拉列表上方时）
我不能为我的生活找出造成这个问题的原因，并欢迎任何解决方案吗？
PS：我还想学习如何使用javascript / jquery执行此特定旋转，但无法为其找到成功的3D旋转。
以下是原始代码：
HTML：
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
</head>
<div id="bannerMaster">
<div id="banner" class="animate">
<div id="welcomeMessage">
<b>
WELCOME TO DERP
</b>
</div>
<div id="menuNav">
<ul id="nav">
<li id="home" class="navigation">
<a href="">
<b>
<div id="home2">
Home
</div>
</b>
</a>
<ul>
<li>
<a href="">
List 1 Derpface 1
</a>
</li>
<li>
<a href="">
List 1 Derpface 2
</a>
</li>
</ul>
</li>
<div class="stuffCSS">
</div>
<li id="aboutUs" class="navigation">
<a href="">
<b>
About
</b>
</a>
<ul>
<li>
<a href="">
List 2 Derpface 3
</a>
</li>
<li>
<a href="">
List 2 Derpface 4
</a>
</li>
</ul>
</li>
<div class="stuffCSS">
</div>
<li id="contactUs" class="navigation">
<a href="">
<b>
Contact
</b>
</a>
<ul>
<li>
<a href="">
List 3 Derpface 5
</a>
</li>
<li>
<a href="">
List 3 Derpface 6
</a>
</li>
</ul>
</li>
<div class="stuffCSS">
</div>
<li id="faq" class="navigation">
<a href="">
<b>
F.A.Q
</b>
</a>
<ul>
<li>
<a href="">
List 4 Derpface 7
</a>
</li>
<li>
<a href="">
<div class="listText">
List 4 Derpface 8
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS：
.animate
{
/*-webkit-transform: rotateX(-90deg);*/
/*-webkit-transform: rotateX(-30deg);*/
}
.animate:hover
{
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
#bannerMaster
{
position: fixed;
margin: -8px 0 0 -8px;
z-index: 9999999999;
height: 75px;
width: 100%;
-webkit-perspective: 100000000000000px;
-moz-perspective: 100000000000000px;
perspective: 100000000000000px;
-webkit-perspective-origin: center center;
-moz-perspective-origin: center center;
perspective-origin: center center;
text-align: center;
text-shadow: 0px 0px 15px #999;
color: #DDDDDD;
font-family: 'Droid Serif', serif;
}
#banner
{
position: relative;
height: 75px;
-webkit-transition: -webkit-transform 0.5s linear;
-moz-transition: transform 0.5s linear;
transition: transform 0.5s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#banner>div
{
line-height: 75px;
position: absolute;
height: 75px;
background-position:center center;
}
#welcomeMessage
{
line-height: 75px;
-webkit-transform: translateZ(37px);
-moz-transform: translateZ(37px);
transform: translateZ(37px);
width: 100%;
background: #333;
box-shadow: 0 0 10px 5px #999 inset;
font-size: 28px;
}
#menuNav
{
-webkit-transform: rotateX(90deg) translateZ(37px);
-moz-transform: rotateX(90deg) translateZ(37px);
transform: rotateX(90deg) translateZ(37px);
width: 100%;
background: #333;
box-shadow: 0 0 10px 5px #999 inset;
font-size: 18px;
padding: 0;
}
/* dropdowns */
#nav
{
margin: 0 0 0 1%;
}
.navigation
{
position: relative;
float: left;
width: 24.4%;
height: 248px;
}
.stuffCSS
{
margin: 16px 0 0 0;
float: left;
box-shadow: 0 0 5px #fff,
0 0 2px #fff inset;
height: 40px;
width: 1px;
}
ul
{
width: 100%;
list-style: none;
padding: 0;
}
ul li
{
display: block;
}
ul li ul li
{
line-height: 43px;
margin: 3px 0 0 0px;
display: block;
height: 40px;
width: 100%;
background: #111;
box-shadow: 0 0 10px 2px #999 inset,
0 0 5px #999;
}
li ul
{
display: none;
}
ul li a
{
text-decoration: none;
text-shadow: 0px 0px 6px #999;
color: #DDDDDD;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
font-size: 13px;
}
ul li a:hover
{
color: #fff;
text-shadow: 0px 0px 9px #DDD;
}
/* derp */
#infoDerp
{
position: absolute;
text-shadow: 0px 0px 5px #000,
0px 0px 25px #A10000;
font-family: 'Droid Serif', serif;
font-size: 12px;
margin: 175px 0 0 80%;
}
使用Javascript：
编辑：使用Jason P的评论建议编辑JS。
$('#nav .navigation').hover(function() {
$(this).stop().animate({top:-12});
}, function() {
$(this).stop().animate({top:0});
});