CodePen

HTML

            
              <nav>
	<ul>
		<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Blog</a>
    		<ul>
    			<li><a href="#">Sub menu 1</a></li>
    			<li><a href="#">Sub menu 2</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Store</a>
    		<ul>
    			<li><a href="#">Sub menu 1</a></li>
    			<li><a href="#">Sub menu 2</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Contact</a></li>
    </ul>
</nav>
            
          
!
via HTML Inspector

CSS

            
              nav{
  ul{
    margin: 0;
    padding: 0;
  }
  a {
    display: inline-block;
    padding:0 15px;
  }
  & > ul{
    text-align:center;
    position:relative;
    list-style: none;
    & > li{
      display:inline;
      position: relative;
      &:hover ul{
        display:inline;
      }
      a{
      background:slategray;
        text-decoration:none;
        &:hover{
          color:white;
        }
      }
      & > ul{
        display:none;
        position:absolute;
        background:green;
        left: 0;
        top:18px;
        li{
          padding:10px;
          & a {
            display: block;
            background: green;
            padding: 0;
            margin: 0; 
            width: 100px;
          }
        }
      }
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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