Question

我正在尝试在HTML文档中创建两个导航菜单。我使用的是nav和ul代码。但我的CSS不允许我为两者创造不同的外观。一个nav将位于页面顶部，第二个位于页面顶部。外观正在旁边的菜单上。

以下是HTML的相关部分：

<div id="navbar"> 

    <nav id="navbar_text">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    </nav>

</div> <!--END navbar-->

<div id="main-wrap" class="group">

    <aside>
    <nav id="sidebar">
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="#">Awards & Articles</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Photo Gallery</a></li>
    </ul>
    </nav>

这是我的CSS：

#sidebar a:link{
    color: #663333;
}

#sidebar a:hover{
    color: #dccfbd;
}

#navbar_text a:link{
    color: #bca380;
}

#navbar_text a:hover{
    color: #dccfbd;
}

#navbar_text{
    width: 100%;
    float: left;
}

#navbar_text li {
    float: left;
    list-style: none;
    padding: 0; 
    background: #663333;
    margin: 0;
    color:#bca380;
}

nav ul li a {
    display: block;
    padding: 10px 10px 10px 15px;
    background: #cab69a;
    -webkit-border-radius: 8px 0px 0px 8px;
    border-radius: 8px 0px 0px 8px;
    margin-top: 10px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: bold;
    color: #663333;
    text-decoration: none;
    -webkit-box-shadow:  2px 2px 1px 2px rgba(181, 154, 115, .25);
    box-shadow:  2px 2px 1px 2px rgba(181, 154, 115, .25);
}

nav ul {
    list-style:none;
}

Answer 1

如果您希望 #navbar_text 和 #sidebar 导航菜单的样式不同，则必须在CSS中明确指定每个样式的外观。

因此，您可以使用类似......

的内容

#navbar_text ul {}
#navbar_text ul li {}
#navbar_text ul li a {}
#navbar_text ul li a:hover {}

#sidebar ul {}
#sidebar ul li {}
#sidebar ul li a {}
#sidebar ul li a:hover {}

基本上，不要过于笼统......

nav ul li a {}

因为它会设置两个菜单的样式，因为它们都使用相同的属性。

如果您正在寻找有关这两个菜单定位的帮助而不是外观，则必须提供更多信息，说明它们当前所处的位置以及您希望它们的位置。但是我上面提到的例子可能会帮助你找到位置，你只需要具体说你希望#sidebar菜单以某种方式定位而#navbar_text以不同的方式定位。

例如......

#navbar_text ul {
    *add position styles here*
}

#sidebar ul {
    *add position styles here*
}

Answer 2

试试这个演示：

http://jsfiddle.net/pSkua/6/

CSS

  body {
    margin: 0;
    padding: 0;
}
aside {
    position: absolute;
    right: 0;
}
#slidebar ul {
    margin: 0;
    padding: 0;
}
#slidebar li {
    display: block;
}
#slidebar a {
    display: inline-block;
}
#sidebar a:link {
    color: #663333;
}
#sidebar a:hover {
    color: #dccfbd;
}
#navbar_text a:link {
    color: #bca380;
}
#navbar_text a:hover {
    color: #dccfbd;
}
#navbar_text {
    width: 100%;
    margin: 0;
    padding: 0;
}
#navbar_text li {
    float: left;
    list-style: none;
    padding: 0;
    background: #663333;
    margin: 0;
    color: #bca380;
}
nav ul li a {
    display: block;
    padding: 10px 10px 10px 15px;
    background: #cab69a;
    -webkit-border-radius: 8px 0px 0px 8px;
    border-radius: 8px 0px 0px 8px;
    margin-top: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: bold;
    color: #663333;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
    box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.clr_both{
    clear:both;
}

无法对nav和ul应用不同的样式

2 个答案: