Question

I have a page with a standard drop-down menu and a slider just below the menu. The problem is that when the menu expands it appears below the slider.

This is the HTML structure:

<div id="header">
<header id="branding" role="banner">
    <hgroup>
        <nav id="access" role="navigation">
            <div class="menu-primary-navigation-container">
                <ul id="menu-primary-navigation" class="menu">...</ul>
            </div>
        </nav>
    </hgroup>
</header>
</div>

<div id="main">
    <div id="primary">
        <div id="content" role="main">
            <div id="jj-nexgen-jquery_slider-5">
                <ul class="ul_jj_slider">

This is the CSS:

#header {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 -2000px;
    padding: 0 2000px;
}

#branding {
    padding-bottom: 12px;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0 12.3%;
}

#access {
display: block;
float: right;
padding-top: 18px;
}

#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
}

#access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;

What am I missing? If I remove the overflow property from the branding element it works but then the header background and padding will not work anymore.

The problem can be seen on this website.

Answer 1

The parent #branding element has its overflow hidden and is cutting off your menu.
To avoid this the branding element must then float.

Of course this breaks the #header. The fix is to make this float as well width adjusted margins and padding:

background: #fff;
margin: 0 -38px;
padding: 0 38px;
float: left;