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 - 子菜單未正確對齊

回答

相關問題