thatdevgirl/css-only-menu.css

## css-only-menu.css
/**
 * CSS-only Menu
 */

/* Link set up */

nav a,
nav a:visited {
  text-decoration: none;
}


/* Navigation menu - first level */

nav {
  border-bottom: 4px solid #000;
  box-shadow: 0 5px 0 #aaa;
  height: 30px;
  margin: 10px 0;
}

nav > ul {
  background: #000;
  display: block;
  float: left;
  margin: 0 0 0 10px;
}

nav > ul > li {
  float: left;
}

nav > ul > li > a {
  border: solid #555;
  border-width: 1px 1px 4px;
  color: #fff;
  display: block;
  margin: 0;
  padding: 9px 30px;
  text-transform: uppercase;
}

nav > ul > li:first-child > a {
  border-left: 0;
}

nav > ul > li:hover > a {
  border-bottom: 3px solid #fff;
  color: #fff;
}


/* Navigation menu - first level, active */

nav a.active,
nav a.active:hover,
nav ul > li:hover > a.active {
  background: #000;
  border-bottom: 3px solid #ee0;
  color: #ee0; }


/* Navigation menu - second level */

nav ul > li ul {
  background: #fff;
  border: 1px solid #000;
  box-shadow: 2px 2px 4px #999;
  display: none; margin: 0;
  position: absolute;
  z-index: 1000;
}

nav ul > li li {
  float: none;
}

nav ul > li li a {
  color: #000;
  display: block;
  margin: 0 1px;
  padding: 8px 20px;
}

nav ul > li:hover ul {
  display: block;
}

nav ul > li li:hover {
  background: #DDD;
}

## css-only-menu.html
<!DOCTYPE html>
<html>

  <head>
    <title>CSS Menu</title>
    <link type="text/css" rel="stylesheet" href="css-only-menu.css" />
  </head>

  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>

        <li>
          <a href="#" class="active">Products</a>

          <ul>
            <li><a href="#">Sub Menu #1</a></li>
            <li><a href="#">Sub Menu #2</a></li>
            <li><a href="#">Sub Menu #3</a></li>
            <li><a href="#">Sub Menu #4</a></li>
          </ul>
        </li>

        <li><a href="#">Categories</a></li>

        <li>
          <a href="#">About Us</a>

          <ul>
            <li><a href="#">Sub Menu #1</a></li>
            <li><a href="#">Sub Menu #2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

</html>