几个小时，但仍然坚持下拉菜单 - 继承css创建父菜单下的空框 - jfiddle含

Question

我试了几个小时现在追查如何摆脱奇怪的框出现在我的CSS菜单。有两层子菜单。第二级子菜单位于我希望它位于父菜单右侧的位置，但一旦出现 - 悬停时 - 同样高度的一个框出现在父菜单下。这个奇怪的盒子也奇怪地抵消了。它只是需要消失。 任何CSS大师在那里？
非常感谢您的期待！

jfiddle here

#pagebody { 
position: inherit !important; 
width: 831px;} 

#pagebody-inner { 
position: inherit !important; 
width: 100%;} 

#alpha, #beta, #gamma, #delta { 
display: block; 
float: left; 
min-height: 1px; 
position: inherit !important;} 

#centernav { 
width: 831px;} 

#dropnav { 
background: none repeat scroll 0 0 #D2D3D5; 
height: 40px;} 

#dropnav ul { 
margin: 0; 
padding: 0;} 

#dropnav ul ul { 
display: none;} 

#dropnav ul li { 
border-right: 1px solid #FFFFFF; 
float: left; 
font-size: 14px; 
list-style: none outside none; 
margin-left: 0; 
padding: 10px 20px 15px 19px; 
position: relative; 
text-align: left; 
text-decoration: none; 
z-index: 88888;} 

#dropnav ul li:hover > ul { 
display: block;} 

#dropnav li a { 
color: #000000; 
text-decoration: none;} 

#dropnav li a:hover { 
color: #990000; 
text-decoration: none;} 

#dropnav li ul { 
background-color: #D2D3D5; 
display: none; 
left: 0; 
margin: 0; 
padding: 0; 
position: absolute; 
top: 40px; 
z-index: 99999;} 

#dropnav li:hover ul { 
display: none; 
padding: 0; 
width: 200px;} 

#dropnav li li { 
border-right: 0 solid #000000; 
border-top: 1px dotted #FFFFFF; 
display: list-item; 
list-style: none outside none; 
padding: 5px 0 5px 20px; 
width: 180px;} 

#dropnav li li a { 
color: #000000; 
text-decoration: none;} 

#dropnav li li a:hover { 
color: #990000; 
text-decoration: none;} 

li#main { 
padding-top: 6px;} 

#subnav li { 
background-color: #A443A5; 
height: 20px;} 

#subnav2 li { 
background-color: #A2A3A5; 
left: 200px; 
position: absolute; 
top: -40px; 
width: 280px !important; 
z-index: 99999; 
display: none; 
height: 20px; 
} 

<div id="centernav"> 
    <div id="dropnav"> 
    <ul> 
     <li id="main"> <a href="#">Home</a> 
    <ul id="subnav"> 
     <li><a href="#">About this site</a></li> 
    </ul> 
</li> 

<li id="main"> <a href="#">Training Modules</a> 
    <ul id="subnav"> 
     <li><a href="#">See Here: </a> 
     <ul id="subnav2"> 
      <li><a href="#">1:</a></li> 
      <li><a href="#">2:</a></li> 
      <li><a href="#">3: </a></li> 
      <li><a href="#">4: </a></li> 
     </ul> 
    </li> 

    <li><a href="#">and here</a> 
     <ul id="subnav2"> 
     <li><a href="#">what is up with</a></li> 
     <li><a href="#">the box under </a></li> 
     <li><a href="#">parent menu </a></li> 
     <li><a href="#">to the left </a></li> 
     <li><a href="#">-it mirrors </a></li> 
     <li><a href="#">height of subnav </a></li> 
     <li><a href="#"> and is positioned lower </a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 

Answer 1

那么，似乎是发生在你的li s的定位从UL路程。 （有问题的灰色框实际上是在UL但由于下面的CSS代码，他们是从他们的父母UL定位远：。

#subnav2 li { 
    background-color: #A2A3A5; 
    display: none; 
    height: 20px; 
    left: 200px; 
    position: absolute;  /* <-- position absolute with the 200px left and -40px top causes list items to be positioned away from their parent UL */ 
    top: -40px; 
    width: 280px !important; 
    z-index: 99999; 
} 

我会尝试移除定位和定位UL代替

FWIW这里是一个简单的3层CSS下拉菜单的例子：http://jsfiddle.net/kboucher/nrAPu/