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

元素#contentsubmenu li上的CSS代码错误。您使用floa: left;，这是一个不正确的CSS代码。另外，只需在此元素上使用float: none;而不是float: left;，它将按预期工作。

Demo on JSFiddle

因此，您是CSS新手：尝试使用正确的缩进编写干净的代码。

为导航子菜单设计UL样式

2 个答案: