在標題後面隱藏子菜單

我正在嘗試使子菜單的一個級別具有簡單的頂層菜單。我想用translate3d來動畫他們，但我無法設法讓他們坐在標題後面z-index。我使用的基礎，所以頭看起來有點像這樣：在標題後面隱藏子菜單

#main-menu > li { 
 
    position: relative; 
 
} 
 

 
#main-menu ul { 
 
    position: absolute; 
 
    -webkit-transition: transform 400ms ease; (omitted other prefixes) 
 
    transform: translate3d(0,-100%,0); 
 
} 
 

 
#main-menu > li:hover ul { 
 
    transform: translate3d(0,0,0); 
 
}

<div id="header"> 
 
    <div class="row"> 
 
     <div class="large-3 small-12 columns"> 
 
      <a id="logo" href="/"></a> 
 
     </div> 
 
     <div class="large-9 small-12 columns"> 
 
      <nav> 
 
       <ul id="main-menu" class="menu"> 
 
        <li class="has-children"> 
 
         <a href="/foo">Foo</a> 
 
         <ul> 
 
          <li> 
 
           <a href="/foo/first">First Child</a> 
 
          </li> 
 
          <li> 
 
           <a href="/foo/second">Second Child</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</div>

因此，在正常狀態下的子菜單#main-menu ul通過其高度垂直平移，使得當主菜單按鈕子菜單向下滑動。但是，我似乎無法完成，因此子菜單位於整個標題的後面，但出現在以下內容的上方。

來源

2016-01-13 Bobe

這可能對你有幫助。這可以通過幾種方式來實現。這就是其中之一。如果你開始使用bootstrap.this解決方案，只需使用html，css和js.this即可輕鬆完成。給你。

<!DOCTYPE> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $("li.one").mouseenter(function(){ 
     $("div.submenu").fadeIn(500,function(){ 
      $(this).mouseleave(function(){ 
       $(this).fadeOut(500); 
      }); 
     }); 
    }); 
}); 

</script> 
<style type="text/css"> 
body{ 
    margin: 0; 
} 
    ul{ 
     background-color:black; 
    } 
    ul li{ 
     color: white; 
     list-style-type: none; 
     display:inline; 
     font-size:30px; 
     width:100px; 
     margin-left: 30px; 
     margin-right: 30px; 
    } 
    div.submenu li{ 
     list-style-type: none; 
     color: white; 
     font-size: 30px; 
     width:200px; 
     background-color: black; 
     text-align: center; 
     position: relative; 
     top:-15px; 
     left:550px; 


    } 
    div.submenu{ 
     display: none; 
    } 
</style> 

</head> 
<body> 

<div style="text-align:center;"> 
    <ul> 
    <li class="one">Basin &amp; Sinks</li> 
    <li>Bathroom Accessories</li> 
    <li>Showers </li> 
    <li>Toilets</li> 

    </ul> 
    <div class="submenu"> 
    <li>one</li> 
    <li>two</li> 
    </div> 
</div> 



</body> 
</html>

來源

2016-01-13 10:36:03

你需要設置你無論你的頭或主菜單（取決於你要去的方式），絕對沒有z-index的應用，然後再添加一個負的z-index絕對定位的子菜單。這會隱藏父元素後面的子菜單內容。

* { 
 
    margin:0; 
 
    padding:0: 
 
    } 
 
#header { 
 
    background: #f4f4f4; 
 
    border-bottom: 1px solid #e3e3e3; 
 

 
    height:60px; 
 
    position:relative; 
 
    } 
 

 
#main-menu { 
 
    position:absolute; 
 
    width:100%; 
 
    height:30px; 
 
    list-style:none; 
 
    } 
 

 
#main-menu li > a { 
 
    display:block; 
 
    text-decoration:none; 
 
    padding:1em 2em; 
 
    } 
 

 
#main-menu li.has-children ul { 
 
    position:absolute; 
 
    z-index:-1; 
 
    top:100%; 
 
    -webkit-transition: transform 400ms ease; 
 
    transform: translate3d(0,-100%,0); 
 
    background:#f4f4f4; 
 
    border:1px solid #e3e3e3; 
 
    padding:1em; 
 
    } 
 

 
#main-menu li:hover ul { 
 

 
    transform: translate3d(0,20%,0); 
 
    }

<div id="header"> 
 
    <div class="row"> 
 
     <div class="large-3 small-12 columns"> 
 
      <a id="logo" href="/"></a> 
 
     </div> 
 
     <div class="large-9 small-12 columns"> 
 
      <nav> 
 
       <ul id="main-menu" class="menu"> 
 
        <li class="has-children"> 
 
         <a href="/foo">Foo</a> 
 
         <ul> 
 
          <li> 
 
           <a href="/foo/first">First Child</a> 
 
          </li> 
 
          <li> 
 
           <a href="/foo/second">Second Child</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-10-23 21:01:46

在標題後面隱藏子菜單

回答

相關問題