CODEWITHSUNDEEP
htmlcss
Szuturon
Szuturon

Reputation: 971

CSS Drop Down menu being cut off by parent div height

In my set up I have my navigation bar set horizontally and contained within my header div like this:

<div id="header-section">
    <div id="main-menu-wrapper">
        <ul id="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Services</a>
                <ul id="sub-men">
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                    <li><a href="#">Service 3</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?

Here's the CSS portion for my whole header section:

#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}

#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}

#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}

#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}

#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}

#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}

#main-menu li ul {
position: absolute;
display: none;
}

#main-menu li ul li{
float: none;
}

#main-menu li:hover ul {
display: block;
}

#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}

#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}


#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}

#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}

#logo {
max-width: 600px;
height: auto;
}

Upvotes: 3

Views: 5994

Answers (2)

WarrenBee
WarrenBee

Reputation: 107

I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.

I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.

Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/

#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}

Upvotes: 1

riverstorm
riverstorm

Reputation: 548

You could try to use absolute positioning on the submenu to remove it from the document flow.

Upvotes: 0

Related Questions