How do I style only the top level of my navigation?

Question

I am working on a navigation menu that has two levels. The first or top level is the horizontal bar that's visible. The second level is a vertical menu that appears below the link that's clicked. I use the selector "nav ul li a", etc to do this. My problem is that those styles also apply to the vertical, second level menus. What selectors can I use to only apply styles to the top level?

<nav>
                <div class="container dropdown">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">Forums</a></li>
                        <li><a href="#" data-toggle="dropdown">Articles</a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                <li><a href="#">Nintendo</a></li>
                                <li><a href="#">PlayStation</a></li>
                                <li><a href="#">PC Gaming</a></li>
                                <li><a href="#">Xbox</a></li>
                            </ul></li>
                        <li><a href="#">Reviews</a></li>
                        <li><a href="#">Tutorials</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
            </nav>

header nav {
                border-top: 1px solid #333;
                border-bottom: 1px solid #222;
                margin-top: 25px;
                padding: 10px;
                box-shadow:         0px -5px 10px 0px rgba(0, 0, 0, 0.75);
            }
            header nav ul {
                list-style: none;
                padding-top: 10px;
            }
            header nav ul li {
                display: inline;
            }   
            header nav ul li a:link, header nav ul li a:visited, header nav ul li a:active, header nav ul li a:hover  {
                color: #777;
                font-size: 14px;
                text-decoration: none;
                text-shadow: 3px 3px 3px #454545;
                margin-right: 15px;
                padding: 15px 25px;
                box-shadow:         -5px 0px 10px 0px rgba(0, 0, 0, 0.75);
                border-right: 1px solid #333;
                border-bottom: 1px solid #333;
            }
            header nav ul li a:hover {
                color: #fff;
                text-shadow: 3px 3px 3px #666666;
                background: rgba(183, 31, 47, 0.25);            
            }

PS: This is with bootstrap.

possible duplicate of [CSS Child vs Descendant selectors](http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors) — Brian Dillingham, Sep 26 '14 at 02:11

ncardeli · Accepted Answer · 2014-09-26T02:17:50.337

You should use '>' in your selector. More information about child combinator selector here.

Instead of: nav ul li a

Use this: nav > div > ul > li > a

header nav {
  border-top: 1px solid #333;
  border-bottom: 1px solid #222;
  margin-top: 25px;
  padding: 10px;
  box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.75);
}
header nav ul {
  list-style: none;
  padding-top: 10px;
}
header nav ul li {
  display: inline;
}
header nav > div > ul > li > a:link,
header nav > div > ul > li a:visited,
header nav > div > ul > li a:active,
header nav > div > ul > li > a:hover {
  color: #777;
  font-size: 14px;
  text-decoration: none;
  text-shadow: 3px 3px 3px #454545;
  margin-right: 15px;
  padding: 15px 25px;
  box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.75);
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
header > nav > ul > li > a:hover {
  color: #fff;
  text-shadow: 3px 3px 3px #666666;
  background: rgba(183, 31, 47, 0.25);
}

<header>
  <nav>
    <div class="container dropdown">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="#">Forums</a>
        </li>
        <li><a href="#" data-toggle="dropdown">Articles</a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#">Nintendo</a>
            </li>
            <li><a href="#">PlayStation</a>
            </li>
            <li><a href="#">PC Gaming</a>
            </li>
            <li><a href="#">Xbox</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Reviews</a>
        </li>
        <li><a href="#">Tutorials</a>
        </li>
        <li><a href="#">About</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

It will only match elements that are direct children. Take a look at the article I linked in my answer. — ncardeli, Sep 26 '14 at 02:24

score 1 · Answer 2 · answered Sep 26 '14 at 02:12

1

like this:

.container > ul {
  /*your style here*/
}

.container > ul > li {
  /*your style here*/
}

answered Sep 26 '14 at 02:12

Laci K

585
2
8
24

How do I style only the top level of my navigation?

2 Answers2