0

我现在尝试了几个小时来追踪如何摆脱出现在我的 CSS 菜单上的奇怪框。有两层子菜单。第二级子菜单位于我想要它在它的父菜单右侧的位置，但是一旦它出现 - 在悬停时 - 一个相同高度的框也会出现在父菜单下。这个奇怪的盒子也奇怪地偏移了。它只需要消失。有没有 CSS 大师？
非常感谢您的关注！！！

jfiddle在这里

#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>
4

1 回答 1

0

好吧，似乎正在发生的事情是您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/

于 2013-01-06T02:41:11.260 回答