0

私は基本的にこれであるCSSドロップダウンを持っています: http://jsfiddle.net/2RgmH/

<ul id="menu">
  <li><span>Example 1</span>
    <ul>
      <li><span>Level 2-A-1</span></li>
      <li><span>Level 2-A-2</span></li>
      <li><span>Example 2</span>
        <ul>
          <li><span>Example 3</span>
          <li><span>Level 3-A-2</span></li>                   
          <li><span>Level 3-A-3</span></li>                                       
        </ul>
      </li>            
      <li><span>Level 2-A-4</span></li>            
    </ul>
  </li>
  <li><span>Level 1-B</span></li>
  <li><span>Level 1-C</span></li>
  <li><span>Level 1-D</span></li>
  <li><span>Level 1-E</span></li>
</ul>

#menu > li > ul li > ul{   /* Third Level & beyond */
  display:none;
  background:#068;
}
#menu > li > ul li:hover > ul{
  display:block;
  position:absolute;
  left:100%;
  border-left:solid 3px #fff;
  top:0;
  width:auto;
}
#menu > li > ul > li ul > li{
  display:block;
  padding:3px 10px;
  border-top:solid 3px #fff;
  white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
  color:#fff;
}

レベル 3 をレベル 2 と並べて表示したいと思います。3 番目のレベルのドロップダウンを position:relative に変更すると、ほとんどの場合これが行われますが、例 2 のサイズが 3 番目のレベル メニューのサイズまで大きくなります - 良くありません。

どこが間違っていますか？

編集：

実際の例にリンクするべきでした。申し訳ありません。私が取り組んでいるページは次のとおりです: http://gmnscouts.org.uk/index2.php/ - これは 2 番目のメニューです。郡 > 活動に行くと、私の問題が表示されます。li は ul に合わせて伸びます。これは相対に設定したものです。絶対に設定すると、メニューが一番上にプッシュされますが、これも望ましくない動作です。

4

1 に答える 1

0

この CSS を追加します。

ul.children li ul.children {
position: absolute;
left: 100%;
top: 0;
}
ul.children > li { position: relative; }

絶対配置により、第 3 レベルのメニューは独自のレイヤーに配置されるため、スペースを占有しません。

于 2013-01-14T13:39:40.097 に答える