Question

问题是我为主要标签应用的样式也在重复使用子链接。我为子链接创建了单独的类（“nav2”）。它适用于Chrome＆amp; 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”并使用.nav2代替您的CSS中的＃nav2来定位它。

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

1）

为顶级项目创建类。类似的东西：

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

然后将 ul＃nav li 更改为 .navLevel1 ，将 ul＃nav li a 更改为 .navLevel1＆gt;你的CSS中的。

2）

将 ul＃nav li 更改为 #nav＆gt; li 和 #nav li a 到 #nav＆gt; li>你的css中的

注意：我使用了子选择器（＆gt;），这意味着您只选择元素的直接子节点而不是子节点。

相同的样式重复子链接

1 个答案: