家长李重叠孩子李，有绝对的房东，亲戚

我正在创建一个网页的顶部菜单，并与脚本，子菜单弹出悬停。我也采取了措施，不让菜单过分偏向右边，如果需要的话，让它沿着另一个方向发展。这张照片澄清：家长李重叠孩子李，有绝对的房东，亲戚

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

家长李重叠孩子李，有绝对的房东，亲戚

回答

相关问题