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

嘿，我认为你想要这样做太阳课position relative和sub ul给position absolute

.sub{
position:absolute;
}


ul.menu li {
    position:relative;
}

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

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

在CSS3中垂直对齐

1 个答案: