CodePen

HTML

            
              <!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>Dropdown</title>
</head>
<body>
  
  <ul class="nav">
  
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog Template</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</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="#">Link 3</a></li>
      </ul>  
    </li>
    <li><a href="#">Pages</a></li>
    <li><a href="#">Galleries</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Contact</a></li>
    
  </ul>
  
</body>
</html>
            
          
!
via HTML Inspector

CSS

            
              * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Tahoma, Arial, Sans-serif;
}

.nav {
  width: 960px;
  margin: 0 auto;
  background: #3C3C3B;
  list-style: none;
  overflow: hidden;
}

.nav li  {
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px 20px;
}

.nav li a:hover {
  background: #000;
}

/* Drop down styling */

.nav li ul {
  display: none;
}

.nav li:hover ul {
  display: block;
  position: absolute;
  background: #3C3C3B;
  list-style: none;
  width: 150px;
}

.nav ul li {
  float: none;
}

.nav ul li a {
  display: block;
  border-top: 1px solid #666;
}

/* sub-menu styling */

.nav li > ul {
  display: none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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