導航子菜單的UL樣式

Question

我正在創建一個頁面，其中有兩個垂直菜單，每個菜單都有一個標題，然后直接位於導航類型鏈接的下面。

我將UL用於兩個標題，並希望將sub UL用於每個菜單的其余部分。 我遇到了一個問題，其中子UL承擔了父級的屬性，並且顯示的是內聯而不是垂直。 同樣，子菜單鏈接是縮進的，而不是直接位於標題下。 我在CSS上還很陌生，所以如果我做錯了這個，我真的很感謝任何建議。 謝謝你的幫助

#Contentmenu ul {
    margin: 0; 
    padding: 40px;
    margin-left:auto;
    margin-right:auto;
    width:960px;
    list-style-type: none; 
    list-style-image: none; 
}

#contentmenu li {
    display: inline; 
    padding:10px;  
    float: left;
}

#contentmenu a {
    display:block;
    padding:10px;
    width:200px;
    color:#ffffff;
    font-size:26px;
    background-color:#c7daff;
}


#Contentsubmenu ul {
    margin: 0; 
    margin-left:auto;
    margin-right:auto;
    width:960px;
    list-style-type: none; 
    list-style-image: none; 
}

#contentsubmenu li {
    display:block;
    floa:left;
}

#contentsubmenu a {
    display:block;
    width:200px;
    color:#000000;
    font-size:20px;
    border-bottom:solid;
    border-bottom-width:1px;
    background-color:#ffffff
}

HTML

<div id="contentmenu">
<ul>
    <li><a href="#">Header 1</a>          
    <div id="contentsubmenu">
        <ul>
            <li><a href="#">Article 1</a></li>
            <li><a href="#" Article 2</a></li>
        </ul>
    </div>
    </li>
    <li><a href="#">Articl3</a></li>
</ul>

Answer 1

如果您只想定位頂層，則可以使用以下方法：

#contentmenu > ul

和

#contentmenu > ul > li

另外，CSS區分大小寫，因此請確保您使用的是#contentmenu

這樣還能解決您的其他問題嗎？

Answer 2

您的CSS代碼在#contentsubmenu li元素上錯誤。 您使用floa: left; ，這是不正確的CSS代碼。 此外，只需使用float: none; 在此元素上而不是float: left; 它將按預期工作。

JSFiddle上的演示

因此，您是CSS的新手：嘗試使用正確的縮進編寫干凈的代碼。