0

嗨，我是 html 和堆栈溢出的新手，所以如果这个问题已经被问过，我什么都找不到（但也许我没有做足够的查找？）。我已经尝试过溢出和清除属性，但我似乎无法让它工作。如果有人能指出我正确的方向，我将不胜感激。

我的问题是，当我重新调整浏览器窗口的大小时，我想通过我的下拉菜单阻止列表元素被推到其他元素下方（我希望它们被切断并隐藏溢出）。我尝试设置溢出：隐藏在功能区元素中，这解决了该问题，但随后创建了另一个问题，因为下拉元素也被视为溢出并且不再出现在悬停时。

这是小提琴的链接；

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

1 回答 1

1

我相信您的问题是您在功能区中设置的 100% 宽度。尝试将其设置为固定值，例如 1000px。看，问题是，你将它设置为 100%（在这种情况下是浏览器的大小），这就是为什么当你调整浏览器大小时所有元素都会破坏！丝带的宽度也在调整！

我建议你阅读一些关于 css Box Model and Positioning的简单指南。

于 2013-08-03T07:02:27.137 回答