Q:

Having issues with CSS overflow:hidden

I have some script which seems to work perfectly functionality wise:
HTML:
<div class="navigation1">icon Home</div>
<div class="dropdown">
    <div class="items">icon Default 1</div>
    <div class="items">icon Reports 1</div>
    <div class="items">icon Other 1</div>
</div>

CSS:
.menu {
    margin:auto;
    /*overflow:hidden;*/
    position: relative;
    background:#CCCCCC;
}

Visually though, it all goes wrong.  As you can see from this jsFiddle, the menu and the footer seem to be laid out incorrectly.  When I uncomment /*overflow:hidden;*/, visually it looks perfect, but the .dropdown seems to get hidden behind the .footer.
How do i get this to look right visually and get it to function correctly too?

A:

Now define your .menu:after some css properties 
as like this
.menu:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

Live Demo
---------
Or 2nd option here 
HTML
<br />
<div class="header">header</div>
<div class="menu">
    <div class="navigation1">icon Home</div>
    <div class="dropdown">
        <div class="items">icon Default 1</div>
        <div class="items">icon Reports 1</div>
        <div class="items">icon Other 1</div>
    </div>
    <div class="navigation2">icon Home</div>
    <div class="dropdown drop2">
        <div class="items">icon Default 2</div>
        <div class="items">icon Reports 2</div>
        <div class="items">icon Other 2</div>
    </div>
    <div class="clr"></div>  // add this line here 

</div>
<div class="footer">footer</div>

Css
.clr{
clear:both;
}

Live Demo

