Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Drop down menu - Sub Items appear to far right of Div

CSS Drop down menu - Sub Items appear to far right of Div

Problem

I wanted to created a hoverable, drop-down menu for a html page. I created what I thought was correct HTML/CSS but the hover items appear on the far left side of the banner div. I've created a JSFIddle of the 'offending'code here: http://jsfiddle.net/4CCdv/2/

Html:


CSS:

div {
    border-radius: 5px;
}

#Header {
    z-index: 1;
    position: fixed;
    width: 85.5%;
    margin-top: 20px;
    height: 95px;
    color: white;
    background-color: #0066ff;
    margin-bottom: 15px;
    text-align:center;
}

.Menu {
    background-color: #2fa4e7;
    background: linear-gradient(top, #2fa4e7 0%, #eee9f0 100%);
    border-color: #1995dc;
    border-radius: 8px;
    border-style:ridge;
    border-width:1px;
    display: inline-block;
    font-size: 1.2em;
    font-family: Tahoma, Geneva, sans-serif;
    list-style-type: none;
    padding: 5px;
    margin: 0.2em;
    border-bottom: 2px solid #0024d9;
}

.Menu ul {
    display: none;
}

.Menu li:hover > ul {
    display: block;
    font-size: 0.8em;
    font-family: Tahoma, Geneva, sans-serif;
    position: absolute;
    top: -1px;
    left: 100%;
}

I've been hammering at this for a while, but can't figure out why it would matter that there is a parent div or why the submenus try and appear outside of it. Any ideas?

Problem courtesy of: ChargerIIC

Solution

Check out this demo. You have to give parent li position:relative and child ul position:absolute

CSS

ul.Menu li {
    position: relative;
}
ul.Menu li:hover > ul {
    display: block;
    font-size: 0.8em;
    font-family: Tahoma, Geneva, sans-serif;
    position: absolute;
    top: 35px;
    left: 0;
}
Solution courtesy of: Vikas Ghodke

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Drop down menu - Sub Items appear to far right of Div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×