<div id="nav"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="parent"><a href="#">Works</a> <ul class="child"> <li><a href="#">Logos</a></li> <li><a href="#">Invites</a></li> <li><a href="#">Illustration</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> </div>
#nav { color: #ffffff; background: #333; height: 50px; top: 0; left: 0; vertical-align: middle; font-family: Verdana, sans-serif; } nav { float: left; } nav ul { padding: 0; margin: 5px 0 0 0; } nav ul li { position: relative; display: inline-block; list-style-type: none; margin: 0; padding: 10px 0; } nav ul li a { color: #ffffff; text-decoration: none; padding: 15px; } nav ul li a:hover { color: #ffffff; background: #5a5a5a; text-decoration: none; padding: 15px; } nav ul li.parent ul.child { display: none; /* Hide Sub Menu */ width: 150px; } nav ul li.parent:hover ul.child { display: block; position: absolute; top: 40px; background: #333; } nav.ul li.parent ul.child li { width: 150px; } nav ul li.parent ul.child li:hover { background: #5a5a5a; text-decoration: none; width: 150px; } nav ul li.parent ul.child li:hover a:hover { background: #5a5a5a; text-decoration: none; width: 150px; padding-top: 0px; padding-bottom: 0px; }