<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>The Cascade Task</title>
  </head>

  <body>

    <div id="outer" class="container">
      <div id="inner" class="container">
        <ul>
          <li class="nav">
            <a href="#">One</a>
          </li>
          <li class="nav">
            <a href="#">Two</a>
          </li>
        </ul>
      </div>
    </div>

  </body>

</html>
body {
  background-color: #fff;
  color: #333;
  font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

#outer div ul .nav a {
  background-color: blue;
  padding: 5px;
  display: inline-block;
  margin-bottom: 10px;
}

#outer div ul .nav a {
  background-color: initial;
}

div div li a {
  color: yellow;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.