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下拉菜单溢出

回答

相关问题