家長李重疊孩子李，有絕對的房東，親戚

我正在創建一個網頁的頂部菜單，並與腳本，子菜單彈出懸停。我也採取了措施，不讓菜單過分偏向右邊，如果需要的話，讓它沿着另一個方向發展。這張照片澄清：家長李重疊孩子李，有絕對的房東，親戚

enter image description here

我通過添加類「到了左」的子子菜單做到這一點。

現在，爲什麼我的子子菜單上的父級的一些菜單項？您可以閱讀「子子項目2」下的「項目3」，這是不可能的。

我試圖將z-index添加到子子菜單而不成功。

<!doctype html> 
    <html> 
    <head> 
     <style type="text/css"> 
      div.top-menu 
      { 
        width: 920px; 
        margin: 0 auto; 
      } 

      div.top-menu ul.topmenu 
      { 
        margin: 0; 
        height: 41px; 
        background: #ccc; 
        padding: 0; 
        position: relative; 
      } 

      ul.topmenu li 
      { 
        list-style: none; 
        float: left; 
        padding: 12px 19px; 
        min-height: 17px; 
        position: relative; 
      } 

      ul.topmenu ul 
      { 
        width: 190px; 
        position: absolute; 
        top: 41px; 
        left: 0; 
        margin: 0; 
        padding: 0; 
        background: #dddddd; 
        border: #c4c4c4 1px solid; 
      } 

      ul.topmenu ul li 
      { 
        float: none; 
        padding: 3px 6px 3px 13px; 
      } 

      ul.topmenu a 
      { 
        color: #333; 
        text-decoration: none; 
      } 

      ul.topmenu ul li a 
      { 
        display: inline-block; 
        font-weight: normal; 
        width: 90%; 
      } 

      ul.topmenu ul li:hover 
      { 
        background: #3399cc; 
      } 

      ul.topmenu ul ul 
      { 
        left: 100%; 
        top: 0; 
      } 

      ul.topmenu div 
      { 
        cursor: pointer; 
      } 

      .topmenu-sub-item > .item 
      { 
        padding-left: 6px; 
      } 

      .topmenu-sub-item > .item > a 
      { 
        margin-top: 3px; 
        margin-bottom: 3px; 
      } 

      ul.topmenu ul ul.to-the-left 
      { 
        left: -100.5%; 
      } 
     </style> 
    </head> 
    <body> 
    <div class="top-menu"> 
     <ul class="topmenu"> 
      <li class="topmenu-root-node"> 
      <a href="foobar.html">root item</a> 
      <ul class="topmenu-submenu-container"> 
       <li class="topmenu-sub-item"> 
       <div class="item"> 
        <a href="/item1">item 1</a> 
       </div> 
       </li> 
       <li class="topmenu-sub-item nonempty"> 
        <div class="item has-submenu"> 
         <a class="topmenu-hassubmenu" href="/item2">item 2</a> 
        </div> 
        <ul class="topmenu-submenu-container to-the-right"> 
         <li class="topmenu-sub-item nonempty"> 
          <div class="item has-submenu"> 
           <a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a> 
          </div> 
          <ul class="topmenu-submenu-container to-the-right"> 
           <li class="topmenu-sub-item nonempty"> 
            <div class="item has-submenu"> 
             <a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a> 
            </div> 
           </li> 
           <li class="topmenu-sub-item"> 
           <div class="item"> 
            <a href="/subsubitem2">Sub sub item 2</a> 
           </div> 
          </li> 
          <li class="topmenu-sub-item"> 
           <div class="item"> 
            <a href="/subsubitem3">Sub sub item 3</a> 
           </div> 
          </li> 
         </ul> 
         </li> 
        </ul> 
       </li> 
       <li class="topmenu-sub-item"> 
       <div class="item"> 
        <a href="/item3">Item 3</a> 
       </div> 
       </li> 
      </ul> 
      </li> 
     </ul> 
    </div> 

    <div class="top-menu" style="margin-top: 170px"> 
     <ul class="topmenu"> 
      <li class="topmenu-root-node"> 
      <a href="foobar.html">root item</a> 
      <ul class="topmenu-submenu-container"> 
       <li class="topmenu-sub-item"> 
       <div class="item"> 
        <a href="/item1">item 1</a> 
       </div> 
       </li> 
       <li class="topmenu-sub-item nonempty"> 
        <div class="item has-submenu"> 
         <a class="topmenu-hassubmenu" href="/item2">item 2</a> 
        </div> 
        <ul class="topmenu-submenu-container to-the-right"> 
         <li class="topmenu-sub-item nonempty"> 
          <div class="item has-submenu"> 
           <a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a> 
          </div> 
          <ul class="topmenu-submenu-container to-the-left"> 
           <li class="topmenu-sub-item nonempty"> 
            <div class="item has-submenu"> 
             <a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a> 
            </div> 
           </li> 
           <li class="topmenu-sub-item"> 
           <div class="item"> 
            <a href="/subsubitem2">Sub sub item 2</a> 
           </div> 
          </li> 
          <li class="topmenu-sub-item"> 
           <div class="item"> 
            <a href="/subsubitem3">Sub sub item 3</a> 
           </div> 
          </li> 
         </ul> 
         </li> 
        </ul> 
       </li> 
       <li class="topmenu-sub-item"> 
       <div class="item"> 
        <a href="/item3">Item 3</a> 
       </div> 
       </li> 
      </ul> 
      </li> 
     </ul> 
    </div> 
    </body> 
</html>

來源

2013-10-25 Anders Lindén

這是因爲元素事項的順序：那進來後面的代碼元素，是對以前的元素之上。

在你的情況下，subsubs的主要項目2 >>一部分是低於事後以下項目3.

您可以覆蓋此使用的z-index的子菜單（不是subsub）：

ul.topmenu ul { 
    ... 
    position:absolute; 
    z-index:999; 
    ... 
}

更新小提琴：http://jsfiddle.net/VK7Mt/3/

來源

2013-10-25 09:19:04

爲什麼不是subub？ –

因爲那麼sub將停留在沒有z-index的位置，並且它內部的子目錄永遠不會達到更高的z-索引（sub-sub的z-index爲999只會影響sub內的順序，但不會影響整個文檔）。如果你想要subub上面submenu頂部菜單，那麼你應該清楚地構造z-index：topmenu在1，sub在2. –

要清楚，什麼topmenu 1，sub 2和subub 3導致？ –

的z-index添加到：

ul.topmenu ul ul.to-the-left { 
    z-index: 100; 
}

那樣你就是說你想讓這個ul在其他元素前面。它的位置是絕對的，所以它需要一些z-索引。

JSFIDDLE

來源

2013-10-25 09:27:19

家長李重疊孩子李，有絕對的房東，親戚

回答

相關問題