<!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>
|