無法將不同的樣式應用於導航和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; 
}