无法将不同的样式应用于导航和ul

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