-1

I have navigation menus that look something like this:

<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>

I have a bunch of CSS styling that looks like this:

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

But I really don't want the styling to cascade down to the "subnav1" menu, yet it is for some reason. I thought the "greater than" sign in my CSS would prevent that. How can I make the "subnav1" menu have its own styling, without anything cascading down from "nav1"?

ACTUAL CODE:

<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;}
BB Design
  • 695
  • 12
  • 26
  • 1
    What exactly is cascading down? Also you can always add a class to the list items in each level. Show some code and be more specific – Huangism Feb 10 '14 at 21:47
  • The test site is at http://bbdesign.com/berksfoods.com (the area under the Products button is taking on some of the styling). – BB Design Feb 10 '14 at 21:55
  • Can you be more specific, give me an example of which exact style – Huangism Feb 10 '14 at 21:56
  • I edited the original question with some code. A bunch of the ul#nav2 styles seem to be cascading down to the ul.menu1 item. – BB Design Feb 10 '14 at 21:59

3 Answers3

0

Basically you have to override them.

A similar question was answered here: How do I prevent CSS inheritance?

Community
  • 1
  • 1
rawnewdlz
  • 1,221
  • 1
  • 17
  • 24
0

The > is exactly what you should be using.

I made a JSFiddle for some examples of technicalities of using >:

For example, #nav1 changes the list-style and only the #nav1 > li's are affected (#subnav1 is still the default circle):

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

HOWEVER, should you do something like #nav2 > li{background-color: yellow;}, the background-color of #subnav2 with still be yellow because it is nested WITHIN #nav > li

Douglas Denhartog
  • 2,036
  • 1
  • 16
  • 23
0

You have 

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

This will target all the anchors under ul#nav2 > li, since the anchor in your second level nav qualifies so it will take styles from it

Use

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

to target the more specific anchor, you might need to apply this at multiple places

Huangism
  • 16,278
  • 7
  • 48
  • 74