is it possible to have a menu with subtext. I've trying to implement the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS Only Menu : Orange</title> <style type="text/css"> #menu4 ul { Â Â Â list-style:none; Â Â Â font-family: Helvetica, Arial, sans-serif; Â Â Â font-size: 30px; Â Â Â letter-spacing: -3px; Â Â Â line-height: 1.2em; Â Â Â border-top:5px dotted #c7e7f3; Â Â Â border-bottom:5px dotted #c7e7f3; Â Â Â float:left; Â Â Â clear:both; Â Â Â margin:20px; } #menu4 ul li{ Â Â Â float:left; } #menu4 ul li a{ Â Â Â display:block; Â Â Â text-decoration:none; Â Â Â padding:10px 10px 5px 10px; Â Â Â color:#66b8d8; Â Â Â width:170px; } #menu4 ul li a span{ Â Â Â display:block; } #menu4 ul li a span.title{
} #menu4 ul li a:hover span.title{ Â Â Â color:#00adef; } #menu4 ul li a span.text{ Â Â Â padding:0px 5px; Â Â Â font-family: Georgia, serif; Â Â Â font-size: 13px; Â Â Â font-style: italic; Â Â Â font-weight: normal; Â Â Â letter-spacing: normal; Â Â Â line-height: 1.6em; Â Â Â color:#c7e7f3; Â Â Â visibility:hidden; } #menu4 ul li a:hover span.text{ Â Â Â visibility:visible; } </style> </head>
<body> <div id="menu4"> Â Â Â Â Â Â Â Â Â Â Â <ul> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <li><a href=""> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="title">About</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="text">Who we are</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </a> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <li><a href=""> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="title">Portfolio</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="text">What we do</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </a> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <li><a href=""> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="title">Blog</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="text">What we talk about</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </a> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <li><a href=""> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="title">Contact</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <span class="text">How to get in touch</span> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </a> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â Â Â Â </ul> Â Â Â Â Â Â Â </div> </body> </html>