Creating a menu using CSSf
<html><head><style type="text/css">
#popuptext a{ text-decoration: none; } /* remove the underlining of links */
#popuptext a span{ display:none; } /* hide the span part */
#popuptext a:hover span{ display: inline; } /* when hovering show the span part */
/* HOW DO WE HAVE A LINK IN THE SPAN!?!!? */
/* VERTICAL PURE CSS MENU */
#nav a{ text-decoration: none; } /* remove the underlining of links */
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
} /* remove any browser indentation and bullets */
/* this hides the nested sub popuptext items */
#nav li ul{ display: none; }
/* when you hover over the "top level" list items any underlying Unordered Lists will display */
#nav ul li:hover ul {
display: block;
position: relative;
left: 100px;
}
/* HORIZONTAL PURE CSS MENU */
#menu a{ text-decoration: none; }
#menu ul
{ margin: 0;
padding: 0;
list-style-type: none;
}
/* forces list to be horizontal instead of vertical */
#menu li{
float: left;
position: relative;
padding: 10px;
}
#menu ul li ul
{ display: none; }
#menu ul li a,
#menu ul li a:visited { /* unselected top-level menu items */
display:block;
float:left;
text-decoration:none;
height:24px;
}
#menu ul li:hover a,
#menu ul li a:hover { /* selected top-level menu items */
border-top:1px solid #000; /* these 2 lines create the push-in illusion */
height:16px;
}
#menu ul li:hover ul,
#menu ul li a:hover ul { /* 2nd level drop-down box */
display:block;
position:absolute;
margin:0;
top:18px; /* place us just up underneath the top-level images */
left:-1px; /* left-align our drop-down to the previous button border */
height:auto; /* the drop-down height from line count */
width:13.5em;
}
</style>
<div id="menu">
<ul>
<li><a href="#">main</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
</ul>
</li>
<li><a href="#">main2</a>
</div>
</ul>
<br \>
<br \>
<br \>
<div id="nav">
<ul>
<li><a href="#">Who's da Bear?</a>
<ul>
<li><a href="http://kittyandbear.net/john">Johnny Bear!</a></li>
<li><a href="#">is Da Bear!</a></li>
</ul>
</li>
<li><a href="#">More stuff</a>
</div>
</ul>
<hr>
<br \>
<div id="popuptext">
<a href="#">Who's da Kitteh?
<span>BobbyCat!</span>
</a>
</div>
</html>