重复子链接的相同样式

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一个

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