하위 링크에 대해 동일한 스타일이 반복됩니다.

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

첫째 : 당신은 adde하지 않은 부류에 클래스. ID "nav2"를 추가했으며 ID는 고유해야합니다. 이것을 class = "nav2"로 변경하고 CSS에서 # nav2 대신 .nav2를 사용하여 대상을 지정해야합니다.

이 문제를 해결하는 좋은 방법이 두 가지 있습니다.

1)

최상위 항목에 대한 클래스를 만듭니다. 같은 : 당신이 .navLevel1 및 UL #의 탐색 리튬에 UL #의 탐색 리을 변경 한 후

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

그리고 당신의 CSS에서 .navLevel1>은합니다.

2)

변경 UL #의 탐색 리 #nav> 리 및 #nav 리튬에 #nav> 리 에> 당신의 CSS에서

참고 : 하위 선택 자 (>)는 하위 항목 대신 요소의 직접 하위 항목 만 선택한다는 의미입니다.