Стилизация вложенных неупорядоченные списки отдельно друг от друга

Question

У меня есть меню навигации, которые выглядят примерно так:

<ul id="nav1"> 
    <li>Link 1</li> 
    <li> 
     Link 2 
     <ul id="subnav1"> 
      <li>Sublink 1</li> 
      <li>Sublink 2</li> 
      <li>Sublink 3</li> 
     </ul> 
    </li> 
    <li>Link 3</li> 
    <li>Link 4</li> 
    <li>Link 5</li> 
</ul> 

У меня есть куча CSS стиль, который выглядит следующим образом:

ul#nav1{ … styles … } 
ul#nav1 > li{ … styles … } 

Но я на самом деле не хотите, чтобы стиль каскадировался до меню «subnav1», но это почему-то. Я думал, что знак «больше, чем» в моем CSS предотвратит это. Как я могу заставить меню «subnav1» иметь свой собственный стиль, без каких-либо каскадов с «nav1»?

АКТУАЛЬНО КОД:

<ul id="nav2" class="clearfix"> 
    <li> 
     <div class="nav2hl"></div><a class="drop" href="products.htm">Products</a> 
     <div class="menu1bg" classclearfix"> 
      <ul class="menu1"> 
       <li>RETAIL</li> 
       <li><a href="retail-hot-dogs.htm">Hot Dogs</a></li> 
       <li><a href="retail-ring-bologna.htm">Ring Bologna</a></li> 
       <li><a href="retail-hams.htm">Hams</a></li> 
       <li><a href="retail-make-it-easy-hams.htm">Make it Easy Hams</a></li> 
       <li><a href="retail-sausage-brats.htm">Sausage/Brats</a></li> 
       <li><a href="retail-deli-meats.htm">Deli Meats</a></li> 
       <li><a href="retail-other.htm">Other</a></li> 
      </ul> 
      <ul class="menu1"> 
       <li>FOOD SERVICE</li> 
       <li><a href="food-service-hot-dogs.htm">Hot Dogs</a></li> 
       <li><a href="food-service-ring-bologna.htm">Ring Bologna</a></li> 
       <li><a href="food-service-hams.htm">Hams</a></li> 
       <li><a href="food-service-sausage-brats.htm">Sausage/Brats</a></li> 
       <li><a href="food-service-deli-meats.htm">Deli Meats</a></li> 
       <li><a href="food-service-roller-bites.htm">Roller Bites</a></li> 
       <li><a href="food-service-pizza-toppings.htm">Pizza Toppings</a></li> 
       <li><a href="food-service-other.htm">Other</a></li> 
      </ul> 
     </div> 
    </li> 
    <li></li> 
    <li><div class="nav2hl"></div><a class="drop" href="recipes.htm">Recipes</a></li> 
    <li></li> 
    <li><div class="nav2hl"></div><a href="family-fun.htm">Family<br />Fun</a></li> 
    <li></li> 
    <li><div class="nav2hl"></div><a href="special-offers.htm">Special<br />Offers</a></li> 
    <li></li> 
    <li><div class="nav2hl"></div><a href="newsworthy.htm">Note &amp;<br />Newsworthy</a></li> 
    <li></li> 
    <li><div class="nav2hl"></div><a href="retailer-locator.htm">Retailer<br />Locator</a></li> 
    <li></li> 
    <li><div class="nav2hl"></div><a href="contact-us.htm">Contact<br />Us</a></li> 
</ul> 

CSS:

div#nav2bg{background:#e8dcab url('../img/bg_nav2.jpg') repeat-y top center;} 
ul#nav2{float:right;margin:0;padding:0;list-style-type:none;} 
ul#nav2 > li{display:inline-block;position:relative;float:left;margin:0;padding:0;} 
ul#nav2 > li:nth-child(even){width:1px;height:93px;background:transparent url('../img/bg_nav2_divider.png') no-repeat top left;} 
ul#nav2 > li a,ul#nav2 > li a:visited{display:inline-block;position:relative;width:107px;height:67px;margin:0;padding:26px 0 0 0;color:#856e46;text-align:center;text-transform:uppercase;} 
ul#nav2 > li a.drop{height:59px;padding-top:34px;} 
ul#nav2 > li a:hover{color:#f4eed6;} 
ul#nav2 > li div.nav2hl{display:none;position:absolute;top:0;left:0;width:107px;height:93px;background-color:#af9764;} 

div.menu1bg{position:absolute;top:93px;left:50%;z-index:999;width:488px;height:297px;margin-left:-244px;background:rgba(237,230,206,0.95);} 
ul.menu1{float:left;width:244px;height:297px;margin:0;padding:0;list-style-type:none;} 

Answer 1

Вы

ul#nav2 > li a, ul#nav2 > li a:visited { ... } 

Это будет предназначаться все якоря под уль # NAV2> ли, так как якорь в вашем втором уровне нав квалифицирует поэтому он будет принимать стили от него

Использование

ul#nav2 > li > a, ul#nav2 > li > a:visited { ... } 

Чтобы настроить таргетинг на более конкретный якорь, вам может потребоваться применить его в нескольких местах.

Answer 2

В основном вы должны переопределить их.

Аналогичный вопрос был дан ответ здесь: How do I prevent CSS inheritance?

Answer 3

> именно то, что вы должны использовать.

Я сделал JSFiddle некоторые примеры технических использования >:

Например, # NAV1 изменяет list-style и только #nav1 > li «s поражаются (# subnav1 еще круг по умолчанию):

#nav1 > li{list-style-type:square;} 

ОДНАКО, вы должны сделать что-то вроде #nav2 > li{background-color: yellow;}, тем background-color из #subnav2 с еще быть yellow, потому что он вложен в #nav > li