HTML CSS下拉菜单溢出

Question

Hi I'm new to both html and stack overflow, so forgive me if this question has already been asked, I couldn't find anything (but maybe I didn't do enough looking?). 嗨，我是html和堆栈溢出的新手，所以请原谅我，如果这个问题已经被提出，我什么也找不到（但是也许我做得不够好？）。 I have tried overflow and clear properties, but I just can't seem to make it work. 我曾尝试过溢出和清除属性，但似乎无法使其正常工作。 If anyone could point me in the right direction I would greatly appreciate it. 如果有人能指出正确的方向，我将不胜感激。

My problem is, that with my dropdown menu I want to stop list elements from being pushed below other elements when I re-size my browser window (I want them to just be cut off with overflow hidden). 我的问题是，当我调整浏览器窗口的大小时，我想通过下拉菜单阻止列表元素被推到其他元素下方（我希望它们被隐藏的溢出部分截断）。 I have tried setting overflow: hidden in the ribbon element, which solves that problem but then creates another as the dropdown elements are also considered overflow and no longer appear on hover. 我曾尝试将溢流设置为：隐藏在功能区元素中，这可以解决该问题，但随后会创建另一个，因为下拉列表元素也被视为溢流，不再出现在悬停时。

Here is a link to a fiddle; 这是小提琴的链接；

http://jsfiddle.net/HVCuc/ http://jsfiddle.net/HVCuc/

Here is the code; 这是代码；

<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>

Answer 1

I believe your problem is the 100% width you set in your ribbon. 我相信您的问题是您在功能区中设置的100％宽度。 Try setting it to a fixed value like 1000px. 尝试将其设置为固定值，例如1000px。 See, the problem is, you set it to 100% (which is the size of the browser in this case) which is why all the elements are breaking when you resize the browser! 问题是，您将其设置为100％（在这种情况下，这是浏览器的大小），这就是为什么在调整浏览器大小时所有元素都中断了！ The ribbon's width is also being resized! 色带的宽度也正在调整！

I recommend you read some simple guides on css Box Model and Positioning . 我建议您阅读一些有关CSS Box Model and Positioning的简单指南。

HTML CSS下拉菜单溢出

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-03 07:02:27

HTML CSS下拉菜单溢出

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-03 07:02:27

解决方案1
1 已采纳 2013-08-03 07:02:27