Css - 子菜单未正确对齐

我有一个简单的nav与一些ULs和LIs。但在一些LIs我有另一个UL创建一个子菜单，但子菜单只是走向右侧。Css - 子菜单未正确对齐

看到这个fiddle。

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主菜单的左边？

希望我清楚。

在此先感谢。

来源

2013-06-30 Mohammad Areeb Siddiqui

均低于答案似乎是正确的，如果你的意思是对齐的左侧菜单项中的** parent **，与主菜单的左侧对齐意味着您希望它位于整个菜单的左侧。 –

是的，我知道！那么我应该接受哪一个？第一个？ –

这取决于你之后的事情 - aljordan的答案将适用于所有的无序列表，但Abduls只适用于子无序列表，并且仅更改左侧填充。阿卜杜勒的国际海事组织对所问的问题更为具体，但事实上你似乎没有在列表中指定你的填充/边距，这表明你在这方面做得不够充分（因为不同的浏览器会以不同的方式解释它们，所以你应该指定他们） –

在这里你去

nav ul li ul{ 
    padding-left:0px;}

来源

2013-06-30 20:08:05

真棒:)工作。但有人给你一个ssame的答案，然后你必须接受他的:)对不起：（ –

这不是接受我的答案。我只是想帮助你，这个答案很酷，但我更具体，针对特定的UL不一般:) –

您是否在谈论做类似this的事情？

变化：

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-30 20:05:36

不！一点也不！：/ –

你在做什么？你想在哪里对齐子菜单？ –

那么，我得到了另一个有效的答案。无论如何，感谢您宝贵的时间:) –

重置您的CSS

ul { padding:0;}

来源

2013-06-30 20:07:09 aljordan82

太棒了！工作:) :) * –

Css - 子菜单未正确对齐

回答

相关问题