Log in

View Full Version : drop down menu



auntnini
06-29-2008, 07:32 PM
What's your favorite drop-down menu? CSS (definition list)? JavaScript? I want something very simple.

Nile
06-29-2008, 07:45 PM
I've got two of my favorite simplest ones:
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/P70/

auntnini
07-12-2008, 12:01 AM
Before I forget, I want to thank you. I sorta tried the second one, but ran into kinks trying to conform it to my CSS navigation buttons styling.

==================CSS for http://jacquimorgan.tripod.com:
#navbarContainer { margin: auto; text-align: center; padding: 0; border: none; color: inherit; background: inherit;}
/* HORIZONTAL UL */
ul#navbar {
white-space: nowrap; margin: 0; padding: 0; border: 0; font-size: .85em; line-height: 1.5em;
font-style: italic; color: #000000;
font-family: "goudy old style", garamond, baskerville, "century schoolbook", goudy, georgia, "times new roman", times, serif; }
ul#navbar li {
float: left; display: inline; list-style: none; margin: 0; padding: 0; width: 6em; text-align: center; }
ul#navbar li a, ul#navbar li a:link, ul#navbar li a:visited {
display:block; text-decoration:none; color:#000; background-color:#F0F8FF; border: 1px outset #fc0; margin:2px; padding:2px; width:100%; } /* == problemw/Mac == */
html>body ul#navbar li a {width: auto; } /* == child selector hack > == */
/* == FIX did not work == */

ul#navbar li a:hover, ul#navbar li a:visited { position: relative;
display: block; text-decoration: none; color: #000033; background-color: #foffff; border: 1px inset #f00;
}

ul#navbar a span {display: none; }
ul#navbar a:hover span { display: block; position: absolute; top: 2em; left: 0; float: right; width: auto; padding: 0 2px; margin: 0 2px; z-index: 10; color: #ffffff; background: #f0a; font: 14px italic Verdana, Arial, Helvetica, sans-serif; text-align: right; }

ul#navbar li.here a:link { color:#3d9ccd;
border: 1px inset #cc6600; display: block; cursor: default; }

===================================


Then -- when I referred to http://www.allistapart.com "Suckerfish Dropdown" -- my horizontal navbar became vertical.

So I'm still working on it. But thank you.