2 navigation menus w/ submenu

2 navigation menus w/ submenu

HTML

<div class="nav">
  <ul>
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2</a></li>
    <li><a href="#">Dropdown #1</a>
      <ul>
        <li><a href="#">Dropdown Item #1</a></li>
        <li><a href="#">Dropdown Item #2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item #3</a></li>
    <li>
      <a href="#">Item #4</a></li>
  </ul>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  color: #555;
  font-family: Arial;
  text-transform: uppercase;
  font-weight: bold;
}

.nav {
  background-color: #333;
  text-align: center;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav ul li {
  display: inline-block;
}

.nav ul li:hover {
  background-color: #6C9EE4;
}

.nav ul li a,
visited {
  color: #FFF;
  padding: 20px 10px 20px 10px;
  display: block;
  text-decoration: none;
}

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

.nav ul ul {
  position: absolute;
  text-align: left;
  display: none;
  background-color: #6C9EE4;
}

.nav ul ul li {
  display: block;
}

.nav ul ul li a,
visited {
  padding: 15px 10px 15px 10px;
}

.nav ul ul li:hover {
  background-color: #ADC9F0;
}

.nav ul ul ul {
  min-width: 175px;
  background-color: #ADC9F0;
  margin: -48px 0 0 182px;
}