如何风格超过一个ul [英] How to style more than one ul

问题描述

我使用下面的CSS行在一个网页上的菜单。

I'm using the CSS lines below for a menu on a webpage.

问题是，我不知道如何使该代码仅适用于

The problem is that I don't know how to make that code apply only to the menu, and not to other ul -unordered lists- on the page!

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;
} 

请帮助。

推荐答案

如前所述，你可以使用你的html上的类。我会尝试和谷歌这一点。有很多例子的菜单在那里。
在前三个是：

As mentioned you can do this using classes on your html. I would try and Google this a little more. There are tons of example for menus out there. In the top three is this:

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需要更新类似下面

Your css would need to be updated similar to below

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！