0

CSSメニューに表示されている奇妙なボックスを取り除く方法を追跡するために、数時間試しました. サブメニューには 2 つのレイヤーがあります。第 2 レベルのサブメニューは、親メニューの右側に配置したい場所にありますが、ホバー時に表示されると、親メニューの下にも同じ高さのボックスが表示されます。この奇妙なボックスも奇妙にオフセットされています。それはただ立ち去る必要があります。そこに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のがから離れて配置されているということ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 に答える