重複子鏈接的相同樣式

Question

我在製作導航欄。 Here's the reference link

問題是我應用於主選項卡的樣式也在爲子鏈接重複。我爲子鏈接創建了單獨的類（「nav2」）。它在Mozilla Firefox Chrome &中正常工作，但無法在IE中解決此問題。請幫助，它有點緊急。

這裏是我的代碼

HTML：

<div id="menu"> 
<ul id="nav"> 
<li><a href="#">Tab1</a> 
<ul id="nav2"> 
<li><a href="#">Menu 1 Submenu item 1</a></li> 
<li><a href="#">Menu 1 Submenu item 2</a></li> 
<li><a href="#">Menu 1 Submenu item 3</a></li> 
</ul> 
</li> 

<li><a href="#">Tab2</a> 
<ul id="nav2"> 
<li><a href="#">Sub Link for tab 2</a></li> 
<li><a href="#">Some other link</a></li> 
<li><a href="#">Some othe rlink</a></li> 
</ul> 
</li> 

<li><a href="#">Tab3</a></li> 
<li><a href="#">Tab4</a></li> 

</li> 
</ul> 
</div> 

這裏的CSS

CSS：

#menu { 
    width: 100%; 
    height: 35px; 
    clear: both; 
} 

ul#nav { 
float: left; 
width:100%; 
margin: 0; 
padding: 0; 
list-style: none; 
-moz-border-radius-topright: 5px; 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-left-radius: 5px; 
} 

ul#nav li { 
display: inline; 
} 

ul#nav li a { 
    float: left; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
line-height: 35px; 
color: #7e764c; 
text-decoration: none; 
text-shadow: 1px 1px #ffffff; 
margin:0 4px 0 0; 
padding: 0 15px; 
-moz-border-radius-topright: 5px; 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-left-radius: 5px; 
background: #fff3b3; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffce9', endColorstr='#fff3b3'); 
background: -webkit-gradient(linear, 0 0, 0 70%, from(#fffce9), to(#fff3b3)); 
background: -moz-linear-gradient(#fffce9, #fff3b3 70%); 
background: linear-gradient(#fffce9, #fff3b3 70%); 
-pie-background: linear-gradient(#fffce9, #fff3b3 70%); 
behavior: url(PIE.htc); 
} 

ul#nav .current a, ul#nav li:hover > a { 
color: #353535; 
text-decoration: none; 
text-shadow: 1px 1px #ffe8a1; 
background: #fecf3a; 
-moz-border-radius-topright: 5px; 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-left-radius: 5px; 
} 

ul#nav ul { 
display: none; 
} 

ul#nav2 li a { 
background:none; 
} 

ul#nav li:hover > ul { 
position: absolute; 
display: block; 
width: 100%; 
height: 35px; 
position: absolute; 
margin: 35px 0 0 0; 
background-color:#fecf3a; 
border-bottom:1px solid #c3aa6f; 
} 

ul#nav li:hover > ul li { 
float: left; 
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
font-weight:normal; 
line-height: 35px; 
color: #86610b; 
text-decoration: none; 
margin: 0; 
background:url(../img/line1.jpg) no-repeat right 15px; 
} 

ul#nav li:hover > ul li a { 
float: left; 
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
font-weight:normal; 
line-height: 35px; 
color: #86610b; 
text-decoration: none; 
margin: 0; 
background:url(../img/arrow-btm2.png) no-repeat center 28px; 
} 

ul#nav li:hover > ul li a:hover { 
color: #86610b; 
text-decoration: none; 
text-shadow: none; 
} 

由於提前

Answer 1

第一：你有沒有阿迪d一個班級到子菜單。你已經添加了id「nav2」，id應該是唯一的。您應該將其更改爲class =「nav2」，並在您的css中使用.nav2而不是＃nav2作爲目標。

有兩種很好的方法可以解決這個問題。

1）

爲頂級項目創建類。喜歡的東西：

<ul id="nav"> 
    <li class="navLevel1"><a href="#">Tab1</a> 

然後你改變UL＃資產淨值李到.navLevel1和UL＃資產淨值李一到.navLevel1>在你的CSS一個。

2）

變化UL＃資產淨值李到#nav>李和#nav李一到#nav> li>在你的CSS一個

注： 我使用了子選擇器（>），這意味着你只能選擇元素的直接子元素而不是子元素。