Question

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

<!-- navigation menu -->
<div class="MenuContainer">
        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li>
                        <a href="#">Projects</a>
                        <ul class="sub">
                                <li><a href="#">Project1</a></li>
                                <li><a href="#">Project2</a></li>
                                <li><a href="#">Project3</a></li>
                        </ul>
                </li>
        </ul>
</div>

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.

Answer 1

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/