Below is some CSS that I found that I really like. To see a working
sample, visit http://www.ecu.edu/cs-dhs/customcf/murphyp/sample5.html.
Right now when you hover over the links, you get a description. I
actually plan to modify this so that an actual sub menu with links
appears, but I can't figure out how to descriptions that are appearing
below the menu to show to the right of the main menu item you are
hovering over?
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}
div#links {position: absolute; top: 81px; left: 0; width: 166px; height:
700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em
sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 180px;left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
-->
</style>
</head>
<body>
<div id="links">
<a href="#">Home<span> The main page of the site-- a jumping-off point,
as it were-- and not actually a picture of our house</span></a>
<a href="#">Links<span> A collection of things which interest me, and
might interest you</span></a>
<a href="#">Away<span> Who knows? Could be anywhere; you clicks the
link and you takes your chances!</span></a>
<a href="#">Eric<span> He's been called "an internationally recognized
expert," but then he's also been called a "techno-fascist"</span></a>
<a href="#">Kat<span> She cooks fabulous meals, she throws great
parties, she helps women deliver their babies-- what <em>can't</em> she
do?</span></a>
<a href="#">Other<span> Inevitably, there's stuff that doesn't fit in
with other stuff, so we stuffed it all into this page of random
stuff</span></a>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
