HTML skeleton code for creating a two-level horizontal drop menu
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ul { padding: 0; margin: 0; list-style: none; } li { float: left; position: relative; width: 8em; } li ul { display: none; position: absolute; top: 1em; left: 0; } li > ul { top: auto; left: auto; } li:hover ul { display: block; } </style> </head> <body> <ul> <li><a href="#">Apples</a> <ul> <li><a href="#">Red Delicious</a></li> <li><a href="#">Gala</a></li> <li><a href="#">Macintosh</a></li> </ul> </li> <li><a href="#">Oranges</a> <ul> <li><a href="#">Navel</a></li> <li><a href="#">Valencia</a></li> <li><a href="#">Blood</a></li> </ul> </li> </ul> </body> </html>