CSS下拉菜單消失後內容

我搜索了類似的主題，但沒有解決方案爲我工作。我的CSS下拉菜單消失在另一個內容區域後面。CSS下拉菜單消失後內容

#poshmenu { 
padding-top: 10px; 
} 

#cssmenu ul { 
    margin: 0; 

    padding: 4px 6px 0; 

    line-height: 100%; 
    border-radius: 1em; 
    font: normal 0.5333333333333333em Arial, Helvetica, sans-serif; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
    width: auto; 
    } 

    #cssmenu li { 
    margin: 0 5px; 
    padding: 0 0 4px; 
    float: left; 
    position: relative; 
    list-style: none; 

    } 
    #cssmenu a, 
    #cssmenu a:link { 
    font-weight: bold; 
    font-size: 13px; 
    color: #4B4B4B; 
    text-decoration: none; 
    display: block; 
    padding: 5px 20px; 
    margin: 0; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 


    } 
    #cssmenu a:hover { 
    background: #000; 

    } 
    #cssmenu .active a, 
    #cssmenu li:hover > a { 

background: #5a565a url(images/overlay.png) repeat-x 0 -40px; 
background: #666666 url(images/overlay.png) repeat-x 0 -40px; 
color: #666; 
border-top: solid 1px #f8f8f8; 
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
text-shadow: 0 1px 0 #ffffff; 
    } 
    #cssmenu ul ul li:hover a, 
    #cssmenu li:hover li a { 

    background: none; 
    border: none; 
    color: #666; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    } 
    #cssmenu ul ul a:hover { 

    background: #403d40 url(images/overlay.png) repeat-x 0 -100px !important; 
    color: #fff !important; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    } 
    #cssmenu li:hover > ul { 
    display: block; 

     } 
    #cssmenu ul ul { 
     display: none; 
    margin: 0; 
    padding: 0; 
    width: 185px; 
    position: absolute; 
    top: 40px; 
    left: 0; 
    background: url(images/overlay.png) repeat-x 0 0; 
    border: solid 1px #b4b4b4; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 

     } 
     #cssmenu ul ul li { 
     float: none; 
     margin: 0; 
     padding: 3px; 

      } 
     #cssmenu ul ul a, 
     #cssmenu ul ul a:link { 
     font-weight: normal; 
      font-size: 12px; 

       } 
      #cssmenu ul:after { 
content: '.'; 
display: block; 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0; 
    } 
    * html #cssmenu ul { 
     height: 1%; 

     }

這裏是我的HTML：

  <div class="poshmenu"> 

     <div id='cssmenu'> 
      <ul> 
      <li class='active'><a href='index.html'><span>Home</span></a></li> 
      <li><a href='#'><span>About</span></a></li> 
      <li class='has-sub'><a href='#'><span>Wood</span></a> 
     <ul> 
    <li><a href='#'><span>Oak</span></a></li> 
    <li><a href='#'><span>Sycamore</span></a></li> 
    <li class='last'><a href='#'><span>Ash</span></a></li> 
    </ul> 
    </li> 
    <li class='last'><a href='#'><span>Contact</span></a> </li> 
    </ul> 
    </div> 
    </div> 
    <div id="imagecontainerindex"><img src="images/indeximagetext.jpg" width="800"    height="320" /></div>

的 '木' 下面的圖片背後菜單彈出。我已經尋找了溢出：隱藏;但沒有一個，我試過z-indexes無濟於事。

來源

2014-01-15 user2630650

請將您的代碼發佈到jsfiddle.net或類似的實時預覽網站，並與我們分享鏈接，以便我們可以嘗試幫助您解決問題。 – user1853181

不可重現：http：//jsbin.com/eletOgI/1/edit也許你只需要更高的z-index？ – m59

在你的'#cssmenu ul ul {'規則中，你是否嘗試將'top'從40減少到26px？ – j08691

我和主菜單欄有同樣的問題，允許下拉項目消失在主內容或其他元素後面。

我的解決方案不是在CSS3或z-index中，而是在HTML和元素的定位。

沒有工作被解僱了這樣的網頁...

我有同樣的問題，但改變的z-index值沒有什麼區別，因爲問題不在於與CSS3但與HTHL 。

我通過改變html頁面元素的順序來解決。花了四天的時間試圖解決這個問題。

[code] 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <header> 
      <nav> 
      </nav> 
     </header> 
     <div id="mainbody"> 
      <article></article> 
      ...etc... 
     </div> 
     <footer> 
     </footer> 
    </body> 
</html> 
[code]

我解決它通過簡單的移動導航部分出了頭的，是這樣的...

[code] 
    <html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <header> 
     </header> 
     <nav> 
     </nav> 
     <div id="mainbody"> 
      <article></article> 
      ...etc... 
     </div> 
     <footer> 
     </footer> 
    </body> 
</html> 
[code]

具有導航塊內的報頭的意思，它是由任何大小頭約束酒吧被設置爲。

來源

2014-04-29 15:54:58 Penfound

CSS下拉菜單消失後內容

回答

相關問題