Question

我正在使用下面的CSS行来显示网页上的菜单。

问题在于我不知道如何使该代码仅适用于菜单，而不适用于页面上的其他ul -unordered列表！

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。

＆＃13;

<ul class="menu">

＆＃13;

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

仅参考＆＃34; ul＆＃34;将更改应用于所有ul元素。

Answer 2

在class元素旁边使用id或HTML属性。例如：

<强> HTML

<ul class="class1">
...
</ul>

<ul class="class1">
...
</ul>

<ul id="class2">
...
</ul>

<强> CSS

.class1{
    implement css styling here
}

#class2{
    implement css styling here
}

此处，前2个ul元素将由.class1 CSS样式设置样式，具有属性ul的最终#class2将由相应的CSS设置样式。

请注意，.表示CSS中的课程，#表示IDs

IDs是唯一的，classes不是唯一的。 More information

Answer 3

如前所述，您可以使用html上的类来完成此操作。我会尝试谷歌这一点。那里有很多菜单的例子。排在前三位的是：

http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html

简单的事情：

<ul class="menu">
    <li class="menu-option">
        <a href="link1">Home</a>
    </li>
    <li class="menu-option active">
        <a href="link2">About</a>
    </li>
    <li class="menu-option">
        <a href="link3">Contact</a>
    </li>
    <ul class="sub-menu">
        <a>Something to click</a>
        <li class="menu-option">
            <a href="link3">Contact</a>
        </li>
        <li class="menu-option">
            <a href="link3">Contact</a>
        </li>
    </ul>
</ul>

您的css需要更新，类似于以下

ul.menu:{
    /*Your style for the menu*/
}

ul.menu li.menu-option:{
    /*Your style for the menu's options*/
}

ul.menu ul.sub-menu:{
    /*Your style for the menu's sub-menu's*/
}

如何设计多个ul的样式

3 个答案: