<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <!--<link href="test3.css" rel="stylesheet" type="text/css"/>--> <style type="text/css"> * { margin: 0px; padding: 0px } section { background: #444; color: #E9E9E9 } a { text-decoration: none; color: #55e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } nav { 400px; height: 60px; margin: 0 auto; color: #999999; } ul, li { list-style-type: none } nav>ul >li { float: left; position: relative; } nav>ul >li >a { display: block; padding: 20px 0px; 80px; text-align: center; border-right: 1px solid #e9e9e9; } .subnav { display: none; } nav>ul>li:hover { background: #12aeef; } nav>ul>li:hover .subnav { display: block; position: absolute; margin-top: 1px } .subnav a { display: block; background-color: #12aeef; color: #FFFFFF; border-bottom: 1px solid #f2f2f2; 100px; text-align: center; } .subnav a:hover { background: #6dc7ec; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a> <ul class="subnav"> <li><a href="#">Home1</a></li> <li><a href="#">Home2</a></li> <li><a href="#">Home3</a></li> </ul> </li> <li><a href="#">About Me</a> <ul class="subnav"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li><a href="#">Contact Me</a></li> </ul> </nav> </header> <section> <article> <div> Nav test </div> </article> </section> </body> </html>