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

Vertical align in CSS3

Vertical align in CSS3

Problem

I'am trying to create a navigation Menu with a sub menu, and fiddled with it today. But i'am stuck at getting the sub menu of the parent menu to align it's links.

my HTML



my CSS

.MenuContainer {
    width:100%;
    height:50px;
    border:1px solid;
    position:relative;
}

ul {
    margin:0;
    padding:0;
}

/*Main menu*/
li.menu {
    height:50px;
    float:left;
}

ul.menu li {
    list-style:none;
    float:left;
    height:49px;
    text-align:center;
}

ul.menu li a {
    display:block;
    padding:0 20px;
    text-align:center;
    font-size:17px;
    line-height:49px;
    text-decoration:none;
    color:#5d5d5d;
}

ul.menu li:hover > a {
    color:#fdfdfd;
}

ul.menu li:hover > ul {
    display:block;
}

/*sub menu*/
li.sub {
    height:40px;
    float:left;
}

ul.sub li {
    list-style:none;
    float:left;
    height:39px;
    text-align:center;
}

ul.sub li a {
    display:block;
    padding:0 20px;
    text-align:center;
    font-size:17px;
    line-height:39px;
    text-decoration:none;
    color:#5d5d5d;
}

If anyone can tell me where i went wrong please do. First time trying to create one from scratch.

Also if anyone know a good HTML5 / CSS3 forum / forums please don't hesitate to post a link. I have tried to find some but all are not serious or no active users.

Also this is my first post at stackoverflow so if i do a beginners mistake here, please just point it out.

Thanks on advance.

Problem courtesy of: Cristian Matthias Ambæk

Solution

Hey i think you want this do the sun class position relative and sub ul give position absolute

.sub{
position:absolute;
}


ul.menu li {
    position:relative;
}

Live demo http://jsfiddle.net/HVk4G/


Vertical menu Updated demo http://jsfiddle.net/HVk4G/1/

Solution courtesy of: Rohit Azad

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

Vertical align in CSS3

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×