html - 如何设计多个 ul

Question

我将下面的 CSS 行用于网页上的菜单。

问题是我不知道如何使该代码只应用于菜单，而不应用于页面上的其他 ul -无序列表!

ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
}

ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #AAF7BB;
font-size: 110%;
}

ul li:hover {
background: #ffffff;
color: #000000;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;  
opacity: 0;
visibility: hidden;
}
ul li ul li { 
background: #ffffff; 
display: block; 
color: #00ff00; 
}

ul li ul li:hover { background: #ffffff; }

ul li:hover ul {
display: block;
opacity: 1;
visibility: visible; 
}
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}

a:active {
text-decoration: none;
} 

请帮忙。

Answer 1

尝试将您的 ul 标记为一个类并引用它而不仅仅是 ul。

<ul class="menu">

并将 css 中的所有 ul 实例更改为 .menu。

仅引用“ul”会将更改应用于所有 ul 元素。