<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li> <a href="#">Products</a> <ul> <li><a href="">Products 1</a></li> <li><a href="">Products 2</a></li> <li><a href="">Products 3</a></li> <li><a href="">Products 4</a></li> <li><a href="">Products 5</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
* {margin:0; padding:0;} body { background-color:#333; font-family:Arial, Helvetica, sans-serif; color:#FFF; } nav { background-color:#900; height:50px; line-height:50px; position:relative; width:770px; margin:auto; margin-top:80px; } nav ul { list-style:none; } nav ul li a { float:left; width:150px; display:block; text-align:center; color:#FFF; text-decoration:none; text-transform:uppercase; } nav ul li a:hover { background-color:#666; display:block; } nav ul li:hover ul { display:block; } nav ul ul { display:none; list-style:none; position:absolute; background-color:#900; left:300px; top:50px; width:190px; } nav ul ul li a { float:none; display:block; padding-left:30px; text-align:left; width:160px; } nav ul ul li a:hover { color:#990; }