0

ナビゲーションバーを作っています。これが参照リンクです

問題は、メインタブに適用したスタイルがサブリンクにも繰り返されていることです。サブリンク（ "nav2"）用に別のクラスを作成しました。ChromeとMozillaFirefoxでは正常に動作しますが、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;
}

前もって感謝します

4

1 に答える 1

0

最初: サブメニューにクラスを追加していません。ID「nav2」を追加しました。ID は一意である必要があります。これを class="nav2" に変更し、css で #nav2 の代わりに .nav2 を使用してそれをターゲットにする必要があります。

これを解決するには、2 つの良い方法があります。

1)

トップレベル アイテムのクラスを作成します。何かのようなもの：

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

次に、css でul#nav liを.navLevel1に変更し、ul#nav li aを.navLevel1 > aに変更します。

2)

css でul#nav liを#nav > liに、 #nav li aを#nav > li > aに変更します。

注: 子セレクター (>) を使用しました。これは、子孫ではなく要素の直接の子のみを選択することを意味します。

于 2012-09-10T06:01:34.730 に答える