1. Paste the following code (<style> ... </style> tags) into a <head> tag of your page:
<style>
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{top:-2px; left:98%}
ul.cssMenu {
...
ul.cssMenum0 li li {
margin:0px;
}
</style>
Or you should link to the generated .css file, for example:
<link href="styles.css" type=text/css rel=stylesheet>
2. Paste the following HTML code where you want to have the menu:
<!-- Deluxe Css Menu -->
<noscript><p><a href="http://deluxe-menu.com/css-menu/">java dropdown menu by Deluxe-Menu.com</a></p></noscript>
<ul class = "cssMenu cssMenum0">
<li><a href="testlink.html">Home<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]></a><![endif]--></li>
<li class=" sub"><a class=" sub" href="#">Product Info<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="testlink.html">Features<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]></a><![endif]--></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="testlink.htm">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]></a><![endif]--></li>
</ul>
<!-- (c) 2009, Deluxe-Menu.com -->
NOTE: it is vital that you use a
DOCTYPE that triggers IE's "standards" rendering mode, or the menu will not
function correctly in IE 7 and IE 8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">