html - CSS3 中的垂直对齐

Question

我正在尝试创建一个带有子菜单的导航菜单，并且今天摆弄了它。但我坚持让父菜单的子菜单对齐它的链接。

我的 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>

我的 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;
}

如果有人能告诉我哪里出错了，请告诉我。第一次尝试从头开始创建一个。

此外，如果有人知道一个好的 HTML5/CSS3 论坛/论坛，请不要犹豫张贴链接。我试图找到一些，但都不是认真的或没有活跃用户。

这也是我在 stackoverflow 上的第一篇文章，所以如果我在这里犯了初学者的错误，请指出。

提前致谢。

Answer 1

嘿，我想你想要这个 sun 类 position relative 和 sub ul give position absolute

.sub{
position:absolute;
}


ul.menu li {
    position:relative;
}

现场演示 http://jsfiddle.net/HVk4G/

---

垂直菜单更新演示 http://jsfiddle.net/HVk4G/1/