HTML CSS下拉菜單溢出

您好我是新來的HTML和堆棧溢出，所以請原諒我，如果這個問題已經被問，我找不到任何東西（但也許我做的還不夠美觀的？）。我已經嘗試了溢出和清除屬性，但我似乎無法使其工作。如果任何人都可以指出我正確的方向，我將不勝感激。HTML CSS下拉菜單溢出

我的問題是，與我的下拉菜單，我想被推向下方的其他元素，當我重新大小我的瀏覽器窗口（我想他們只是用溢出隱藏切斷）停止列表元素。我嘗試過設置溢出：隱藏在功能區元素中，它解決了這個問題，但隨後創建了另一個元素，因爲下拉元素也被視爲溢出並且不再出現在懸停上。

這裏是一個小提琴的鏈接;

http://jsfiddle.net/HVCuc/

下面是代碼;

<DOCTYPE !html> 

<style> 

    .image 
    { 
     position: absolute; 
     top:50px; 
     left:8px; 
     z-index: 3; 
    } 


    .bannerback 
    { 
    top: 0px; 
    left: 0px; 
    postion: absolute; 
    z-index: -1; 
    margin: 0; 
    overflow: hidden; 
    } 

    .ribbon 
    { 
    position: absolute; 
    left: 5px; 
    top: 45px; 
    height:81px; 
    width: 100%; 
    background: rgba(215,83,0,0.85); 
    } 

    .dropdown 
    { 
    position: relative; 
    width: 100%; 
    } 

    menu ul ul{ 
    display: none; 
    } 

    menu ul li:hover > ul{ 
    display:block; 
    } 

    menu ul li:hover > a{ 
    color: rgb(215,83,0); 
    } 

    menu ul { 
    background: rgba(215,83,0,0); 
    border-radius: 0px; 
    list-style: none; 
    position: absolute; 
    display: table; 
    top:0px; 
    z-index: 4; 
    overflow: hidden; 
    } 

    menu ul li { 
    overflow: hidden; 
    } 

    menu ul:after { 
     content: ""; clear: both; display: block; 
    } 

    menu ul li { 
    float: left; 
    } 

    menu ul li:hover { 
    background: black; 
    } 

    menu ul li a:hover{ 
    color: rgb(215,83,0); 
    } 

    menu ul li a { 
     display: block; 
     padding: 25px 80px; 
     color: black; 
     text-decoration: none; 
     font-weight: bold; 
     font-size: 26px; 
     background: rgba(215,83,0,0); 
     font-family:"Trebuchet MS", Helvetica, sans-serif; 
    } 

    menu ul ul { 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
    background: rgba(215,83,0,0.85); 
    } 

    menu ul ul li { 
    float: none; 
    position: relative; 
    } 

</style> 


<body bgcolor = "black"> 

<div class = "bannerback"> 
<img src="file:///C:/Users/JesseAulsebrook/Desktop/Yearbook/Banner.png" width="2000" height="200"> 
</div> 

<div class = "image"> 
<img src="file:///C:/Users/JesseAulsebrook/Desktop/Yearbook/TurtleLogo.png" width="78" height ="75"> 
</div> 

<div class = "ribbon"> 

<menu> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">RST & Society</a> 

     <ul> 
      <li><a href="#">RST</a></li> 
      <li><a href="#">Society</a></li> 
     </ul> 

    </li> 

    <li><a href="#">Wings</a> 

     <ul> 
      <li><a href="#">Ground Floor West</a></li> 
      <li><a href="#">Ground Floor East</a></li> 
      <li><a href="#">First Floor West</a></li> 
      <li><a href="#">First Floor East</a></li> 
      <li><a href="#">Second Floor West</a></li> 
      <li><a href="#">Second Floor East</a></li> 
      <li><a href="#">Third Floor West</a></li> 
      <li><a href="#">Third Floor East</a></li> 
      <li><a href="#">Fourth Floor West</a></li> 
      <li><a href="#">Fourth Floor East</a></li> 
     </ul> 

    </li> 

    <li><a href="#">Events</a></li> 
    <li><a href="#">Photos</a></li> 
    </ul> 

</menu> 

</div> 

</body> 





</html>

來源

2013-08-03 Jesse James Aulsebrook

這將是最好的，如果你能提供一個[小提琴]（http://jsfiddle.net）再現您的問題 –

我相信您的問題是您在功能區中設置的100％寬度。嘗試將其設置爲像1000px這樣的固定值。看，問題是，你把它設置爲100％（這是這種情況下瀏覽器的大小），這就是爲什麼當你調整瀏覽器的大小時，所有元素都崩潰了！色帶的寬度也在調整中！

我建議你在CSS Box Model and Positioning閱讀一些簡單的指導。

來源

2013-08-03 07:02:27

HTML CSS下拉菜單溢出

回答

相關問題