Question

嗨，我是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>

Answer 1

我相信您的问题是您在功能区中设置的100％宽度。尝试将其设置为固定值，如1000px。请注意，问题是，您将其设置为100％（在这种情况下是浏览器的大小），这就是为什么在调整浏览器大小时所有元素都会中断的原因！功能区的宽度也正在调整大小！

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

HTML CSS下拉菜单溢出

1 个答案: