0

我有nav一些简单的ULs和LIs。但在某些情况下，LIs我有另一个UL创建子菜单，但子菜单只是向右侧移动。

看到这个小提琴。

HTML：

<header>
        <h1 style="float: left; margin-top: 2%;">&nbsp;&nbsp;&nbsp;Naughty Mama.</h1>

    <nav>
        <ul>
            <li><a href="profile.php">My Profile</a>
            </li>
            <li><a href="inbox.php">Inbox</a>
            </li>
            <li>    <a href="notifications.php">Notifications</a>

                <ul>
                    <li>Notification 1</li>
                    <li>Notification 2</li>
                    <li>Notification 3</li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

CSS：

header {
    background-color: #ddd;
}
nav {
    float: right;
    margin-right: 5%;
    margin-top: 2%;
}
nav ul li {
    display: inline-block;
    background-color: #eee;
    vertical-align: top;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 15px;
}
nav ul li a:hover {
    color: #000;
    background: #aaa;
}
nav ul li ul li {
    display: block;
}

如何将那些双嵌套对齐LIs到主菜单的左侧？

希望我清楚。

提前致谢。

4

3 回答 3

1

重置你的 CSS

ul {  padding:0;}
于 2013-06-30T20:07:09.063 回答
1

干得好

nav ul li ul{
    padding-left:0px;}
于 2013-06-30T20:08:05.543 回答
0

你是在谈论做这样的事情吗？

变化：

nav {
    float: right;
    margin-right: 5%;
    margin-top: 2%;
}
nav ul {
    padding-left:0;
    margin-left:0;
}
nav > ul { position:relative; }
nav ul li ul {
    display: block;
    position:absolute; 
    left:0;
}
于 2013-06-30T20:05:36.890 回答