CODEWITHSUNDEEP
htmlcssdrop-down-menu
user1278496
user1278496

Reputation: 1066

Drop down menu appears behind other content outside of a div

I have created a navigation menu which uses javascript. I have drop down menus in parts of the main menu but when I click on the arrow it only displays the drop down up to the end of the div (see image):

enter image description here

How can I get it so that the drop down appears on top. I have tried overflow: visible but this doesnt seem to work.

HTML:

<div id="top_bar">
<div id="top_inner">
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="220" height="100" class="logo"></a></div>
<div class="nav">
<ul class = "menu" >
            <li> <a href = "#" > Home </a> </li>
            <li><a href = "#" > Tutorials </a>
        <ul class = "submenu" >
            <li> <a href = "#" > CSS </a> </li>
            <li> <a href = "#"> Javascript </a> </li>
            <li> <a href = "#" > jQuery </a> </li>
            <li> <a href = "#"> HTML </a> </li>
            <li> <a href = "#" > PHP </a> </li>
        </ul>
        </li>

CSS:

.nav {
margin: 0 auto;
position: relative;
padding-top: 85px;
}

ul.menu {
list-style: none;
padding: 0 22px;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}

ul.menu li {
float: left;
margin: 0;  
padding: 0 15px 0 0;
position: relative; 
}

ul.menu li ul.submenu {
list-style: none;
position: absolute; 
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}

ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525; 
border-bottom: 1px solid #444; 
clear: both;
width: 170px;
}

html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}

Upvotes: 0

Views: 18673

Answers (3)

Code_Student09
Code_Student09

Reputation: 327

Make sure that your overflow setting is set to :show.

I was having this same problem when I saw that mine was set to hidden.

Upvotes: 1

Kyle Ezra
Kyle Ezra

Reputation: 43

I believe the answer is z-index, but z-index only works on positoned elements. It shoukd work if you add 

ul.menu li ul.submenu {
    z-index: 5000;
    position: relative;

}

Upvotes: 2

msEmmaMays
msEmmaMays

Reputation: 1063

You need to use Z-index in the submenu tag

ul.menu li ul.submenu {
z-index: 5000; // <-- ADD THIS
list-style: none;
position: absolute; 
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}

---- EDIT based on your comment below----

Wait - I think we are misunderstating you based on your comment- you want the submenu moved UP so it's above the existing menu? (as opposed to above the content on the page?) If so you need to do a negative margin-top on the submenu like this:

ul.submenu {
    margin-top:-2em; // adjust me (use 'em' to scale w/ font size adjustments)
}

you need "position: absolute; " for this to work but you already have it on this class in your CSS

Upvotes: 5

Related Questions