Css Can'；t将不同的样式应用于nav和ul

我试图在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>

如果您希望#navbar_文本和#侧边栏导航菜单的样式不同，则必须在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 {}

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

如果您正在寻找有关这两个菜单相对于外观的位置的帮助，则必须提供有关它们当前所在位置以及您希望它们所在位置的更多信息。但是我上面提到的例子可能会帮助你确定位置，你只需要具体地说，你希望#侧边栏菜单以某种方式定位，#导航栏#文本以另一种方式定位

例如

#navbar_text ul {
    *add position styles here*
}

#sidebar ul {
    *add position styles here*
}

尝试此演示：

CSS

---

你的HTML代码中有一些错误，比如

div#main wrap

打开和未关闭。是的，我只是复制了页面的一部分，忽略了div结尾。谢谢，谢谢。我试图添加#sidebar nav ul li a{}，但没有做任何更改。我遗漏了什么吗？在#侧边栏之后省略nav，因为id包含在nav属性中，CSS不理解，也不需要它。我明白，你只要做一下侧边栏就行了。现在，id为“#navagation bar_text”的顶部导航栏没有采用我在css中设置的任何样式。JSFIDLE包含一些HTML错误，您必须更正关闭和打开的标记。我尝试过，但它也出现了类似的问题。侧边栏的样式为“按钮”，而导航栏是基本的文本栏，但是导航栏具有侧边栏的特征。我想我需要重新考虑一些事情。我知道我错过了一些简单的事情。

#navbar_text ul {
    *add position styles here*
}

#sidebar ul {
    *add position styles here*
}

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