Pull down menus
Are often a combination of HTMl, CSS and JavaScript. There are ways to do them with just html and css. For instance:
Given the following code for HTML (Just copy and paste into a new html document to try out)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../Resources/easyPullDown.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pdmenu">
<ul>
<li><a href="#">File</a>
<ul>
<li><a href="#">New</a></li>
<li><a href="#">Open</a></li>
<li><a href="#">Close</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Save As</a></li>
<li><a href="#">Exit</a></li>
</ul>
</li>
<li><a href="#">Edit</a>
<ul>
<li><a href="#">Undo</a></li>
<li><a href="#">Redo</a></li>
<li><a href="#">Cut</a></li>
<li><a href="#">Copy</a></li>
<li><a href="#">Paste</a></li>
<li><a href="#">Select All</a></li>
</ul>
</li>
<li><a href="#">View</a>
<ul>
<li><a href="#">Code</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Page Info</a></li>
<li><a href="#">Source</a></li>
</ul>
</li>
<li><a href="#">Modify</a>
<ul>
<li><a href="#">Properties</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Display</a></li>
<li><a href="#">Meta-Tags</a></li>
</ul>
</li>
<li><a href="#">Help</a>
<ul>
<li><a href="#">Contents</a></li>
<li><a href="#">Notes</a></li>
<li><a href="#">CSS Info</a></li>
<li><script src="http://www.uoguelph.ca/~stuartr/includes/email.js" type="text/JavaScript"></script></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Create a new css document and copy and paste the following code into it.
.pdmenu ul { list-style-type:none; margin-bottom:50px;padding:10px;}
.pdmenu ul li { width:100px; float:left;position:relative; }
.pdmenu ul ul { margin:0;padding:0;background:#fff; display:none;}
.pdmenu ul li:hover ul { display:block; position:absolute;left:0;width:100px;}
.pdmenu ul ul a { display:block;text-decoration:none;padding:0 4px;}
.pdmenu ul ul a:hover { color:#fff; background:#ccc;}