Html 为navbar的css ul和li元素添加不同的类

我有一个网页，其中有两个不同的UL元素，每个元素都需要不同的CSS规则。其中一个UL元素是一个菜单栏，我一直在尝试为它添加一个样式名称，以便将它与另一个UL元素区分开来。当我这样做的时候，结果是一团糟。我在这个网站和谷歌上搜索了几个小时，但找不到一个解决方案，不管我修改了哪些代码

适用于不带类名的菜单的代码为：

#menuBackground {
position: fixed;
top: 0;
background:#0ab2aa;
width:100%;
height:50px;
text-align: center;
z-index: 999;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
vertical-align: top;
margin-right:1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:120px;
height:50px;
text-align: center;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#0ab2aa;
text-decoration:none;
font-size: 1rem;
}
.drop a{
display:block;
min-width:120px;
height:50px;
text-align: left;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#2f3036;
text-decoration:none;
font-size: 1rem;
}
/*Hover state for top level links*/
li:hover a {
background:#0ab2aa
}
/*Style for dropdown links*/
li:hover ul a {
background:#f3f3f3;
color:#2f3036;
height:40px;
line-height:40px
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background:#0ab2aa;
color:#fff
}
/*Hide dropdown links until they are needed*/
li ul {
position: absolute;
display:none
}
/*Make dropdown links vertical*/
li ul li {
display:block;
}
/*Prevent text wrapping*/
li ul li a {
width:auto;
min-width:100px;
padding:0 10px
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
display:block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration:none;
color:#fff;
background:#0ab2aa;
text-align:left;
padding: 16px 0;
display:none;
width:100%!important
}

/*Hide checkbox*/
input[type=checkbox] {
display:none
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display:block;
margin:0 auto
}

/*Responsive Styles*/
@media screen and (max-width : 1007px) {
/*Make dropdown links appear inline*/
ul {
position:static;
display:none;
white-space: initial;
}

/*Create vertical spacing*/
li {
margin-bottom:1px
}

/*Make all menu links full width*/
ul li,li a {
width:100%
}

/*Display 'show menu' link*/
.show-menu {
display:block
}
}

但当我尝试添加类名nav li和nav ul时，如果我将其更改为（许多不同尝试之一）：

显示错误。（此版本中看不到导航链接，但其他版本有不同的错误）

html代码是：

<div id="menuBackground">
<div id="menuContainer">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul class="nav-ul" id="menu">
<li class="nav-li"><a href="index.php">Home</a>
</li>
<li class="nav-li">
<a href="about.php">About</a>
</li>
<li class="nav-li">
<a href="#">Projects</a>
<ul class="hidden">
<li class="drop"><a href="project1.php">Handyman</a></li>
<li class="drop"><a href="project2.php">Barrhill in Bloom</a></li>
<li class="drop"><a href="project3.php">Youth Club</a></li>
<li class="drop"><a href="project3.php">Coffee morning</a></li>
</ul>
</li>
<li class="nav-li"><a href="hall.php">Hall</a>
</li>
<li class="nav-li"><a href="hall.php">Newsletters</a>
</li>
<li class="nav-li"><a href="meetings.php">Meetings</a>
</li>
<li class="nav-li"><a href="news.php">News</a>
</li>
<li class="nav-li"><a href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>

显示菜单

我知道这可能很简单，但我一直在尝试很多不同的东西（我现在有24个版本的CSS文件），什么都不管用

我假设一定有一种格式可以将类名添加到包含多个元素的CSS代码中，比如

liulli{}

，但我似乎找不到这样做的方法。将其更改为

.nav li、.nav ul li{}

似乎不起作用。这让我快发疯了

我真希望有人能帮忙

多谢各位

---

Tog

如果您想在所有列表和列表项上使用

nav ul

和

nav li

类，基本上需要做两件事

首先，确保HTML中的所有

和

元素也具有正确的类

例如：

…更改为

等等

然后，您可以将CSS中的所有

ul

和

li

选择器重命名为

.nav ul

和

.nav li

例如：

li ul li{
显示：块；
}

…更改为

.nav li.nav ul.nav li{
显示：块；
}
/*或者，如果你愿意的话*/
li.nav ul li{
显示：块；
}

---

希望有帮助

使用直接子选择器仅为某些嵌套元素设置样式：

实际上，你不需要为nav ul和nav li设置类。如果您只想使用CSS，则可以使用直接子选择器“>”只针对选定的项。直接子项选择器将只影响直接子项。i、 e.如果你这样做，菜单>李。只有#菜单的直接子项（li项）将接收样式：

这意味着您可以将一级导航li作为目标：

#menu > li { 
...styling goes here 
}

此外，您还可以将第二级li作为目标：

#menu > li > ul > li { 
...styling goes here 
}

这将确保两个嵌套列表元素的样式是分开的

---

希望这能有所帮助。

谢谢你，温斯顿。这正是我所需要的：——）

#menu > li > ul > li { 
...styling goes here 
}