子链接重复相同的样式

Question

我正在制作一个导航栏。 Here's the reference link

问题是我为主选项卡应用的样式也对子链接重复。我为子链接（“nav2”）创建了单独的类。它在 Chrome 和 Mozilla Firefox 中运行良好，但无法在 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

首先：您尚未向子菜单添加课程。您已经添加了 id “nav2”，并且 id 应该是唯一的。您应该将其更改为 class="nav2" 并在您的 css 中使用 .nav2 而不是 #nav2 来定位它。

有两种很好的方法可以解决这个问题。

1)

为顶级项目创建类。比如：

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

然后您将 ul#nav li 更改为 .navLevel1 并将 ul#nav li a 更改为 .navLevel1 > a 在你的 CSS 中。

2)

将 ul#nav li 更改为 #nav > li 和 #nav li a 更改为 #nav > li > a 在你的 CSS 中

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