CodePen

HTML

            
              <nav role='navigation'>
  <ul>
    <li><a href="#">Tab 1</a></li>
    <li class="active"><a href="#">Tab 2</a>
      <ul>
        <li><a href="#">Tab 2-1</a></li>
        <li><a href="#">Tab 2-2</a></li>
        <li><a href="#">Tab 2-3</a></li>
        <li><a href="#">Tab 2-4</a></li>
      </ul>
      
    </li>
    <li><a href="#">Tab 3</a>
      <ul>
        <li><a href="#">Tab 3-1</a></li>
        <li><a href="#">Tab 3-2</a></li>
        <li><a href="#">Tab 3-3</a></li>
        <li><a href="#">Tab 3-4</a></li>
      </ul>
    </li>
    <li><a href="#">Tab 4</a></li>
  </ul>
</nav>  
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing:border-box;
}

a {
  text-decoration:none;
  color:black;
  display:block;
}

nav {
  width:960px;
  margin:20px auto;
  background:grey;
  height:69px;
}

nav > ul {
  font-size:0; /* Removes whitespace */
  position:relative;
}

nav > ul > li {
  display:inline-block;
  font-size:16px;
  line-height:32px;
  padding:0 25px;
}

nav ul li.active {
  background:blue;
}

nav > ul > li:hover {
  background:lightblue;
}


nav > ul > li > ul {
  position:absolute;
  top:32px;
  left:0;
  font-size:0;
  visibility:hidden;
}

nav > ul > li.active > ul {
  visibility:visible;
  background:green;
}

nav > ul > li:hover > ul {
  visibility:visible;
  background:red;
}

nav ul ul li {
  display:inline-block;
  font-size:16px;
  line-height:32px;
  padding:0 25px;  
  color:white;
}

nav ul ul li a {
  color:white;
}


  
  
  
  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................