Jonathan N. Little wrote:
> There are plenty of simple horizontal menu from a list
> examples out there what work.
>
Here is one simple example with typical caveats
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizonal Menu</title>
<style type="text/css">
/* JavaScript will be required for IE6 support */
ul.menu, ul.menu * { list-style: none; margin: 0; padding: .2em; }
ul.menu li { display: inline; position: relative; white-space:
nowrap; line-height: 1.4; }
ul.menu li ul { position: absolute; display: none; z-index: 1}
ul.menu li ul li { display: block; }
/* IE7 needs a tweak on the top position */
ul.menu li:hover ul { display: block; left: 0; top: 1.4em; z-index: 2}
/* colorized just for demonstration */
ul.menu { background: #eef; }
ul.menu li { background: #efe; }
ul.menu li ul { background: #fee; }
ul.menu li ul li { background: #fef; }
ul.menu a { background: #eee; }
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">A Link That Is Long</a>
<ul>
<li>
<a href="#">A Submenu Link 1</a>
</li>
<li>
<a href="#">A Submenu Link 2</a>
</li>
<li>
<a href="#">A Submenu Link 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Another Link</a>
<ul>
<li>
<a href="#">Submenu A</a>
</li>
<li>
<a href="#">Submenu A</a>
</li>
</ul>
</li>
<li>
<a href="#">A Link</a>
</li>
<li>
<a href="#">A Link Too</a>
</li>
<li>
<a href="#">A Link</a>
<ul>
<li>
<a href="#">Foo</a>
</li>
<li>
<a href="#">Bar</a>
</li>
<li>
<a href="#">Baz</a>
</li>
</ul>
</li>
<li>
<a href="#">A Link</a>
</li>
</ul>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com