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远离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/

几个小时但仍然停留在下拉子菜单 - 继承css创建空菜单下的父菜单 - jfiddle incl

1 个答案: