HTML CSS Dropdown menu overflow

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?). 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/

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>

It would be best if you can provide a fiddle that reproduces your problem — omma2289
– omma2289, Commented Aug 3, 2013 at 6:51

Johnny Li · Accepted Answer · 2013-08-03 07:10:22Z

1

I believe your problem is the 100% width you set in your ribbon. Try setting it to a fixed value like 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! The ribbon's width is also being resized!

I recommend you read some simple guides on css Box Model and Positioning.

edited Aug 3, 2013 at 7:10

answered Aug 3, 2013 at 7:02

Johnny Li

674 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML CSS Dropdown menu overflow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related