I rolled my own CSS drop down menus; I really wanted to steal someone
else's work but I couldn't follow the CSS logic of the tutorials I
found and none of the freely available CSS drop drop down menus I found
did what I wanted; My needs are simple:
* I have a Menubar background graphic that spans the top of the page
(with end caps)
* I want the menu items evenly distributed across the Menubar (there's
plenty of room)
* Menubar items (the top level) are graphics with mouseover, and
mousedown states (I'm managing the states through a JavaScript but
would love to be able to do it through pure CSS -- there are reasons I
couldn't which I'll outline below)
• Some menu items have a small icon (that changes on mouseover) to
their right corresponding to where the link would take a user (I'm just
using an <img> tag inside the <li> tag with no special CSS and
javaScript for the mouse events; this seems to work but, again, I'd
rather get rid of the JavaScript)
• Some menus have sub menus and thus have disclosure arrows on the
right side of the menu (I tried accomplishing this the same way as
above with two ugly results: 1) the arrows are not right justified and,
while they otherwise look fine in Camino, 2) in Firefox and Safari the
arrow art extends outside the "block" of the menu item.
I have to confess that I still feel very lost in the woods with CSS;
I'm a solid programer but this just seems amazingly arcane to me and
I'm flying blind. My menus have numerous problems: if I set the <li>
display property to block my background image disappears to the right
and left of my top level menubar graphic, without block the sub menu
"looks" fine but only hilites when the link is moused over (which is
counter intuitive). Right now I've banged my head on this that I don't
care so much how clunky my code is so long as I have something
Deliverable. I'm reluctant to share my cluttered foggy minded CSS but I
will on the hope that someone might help me out.
Alternately, If there is some CSS source out there that I can tweak
into line for my purposes, I'd be very grateful.
My source
#menu {white-space: nowrap; width: 100%; float: left; }
#menu ul { line-height: 17px; list-style: none; margin: 0; padding: 0;
width: 100%; float: inherit; }
#menu a { color: #daffe8; background-color: #008747 ; }
#menu li:a { display: block; }
#menu h2 { background-color: transparent; background-image:
url(../../Computrain/graphics/menubar.gif); background-repeat:
repeat-x; background-position: 0 0; width: 100%; margin: 0; padding: 0;
border-width: 0; outline-style:
none;rl(../../Computrain/graphics/menubar.gif)
}
#menu a:hover { color: white; font-style: inherit; background: #008750;
text-decoration: underline overline; }
#menu li {position: relative;}
#menu ul ul { background-color: #008747; text-align: left; position:
absolute; top: 16px; width: auto; z-index: 500; float: left; padding: 0
3px; border: solid 1px yellow; display: block; }
#menu ul ul ul { background-color: #008747; top: 1px; left: 100%;
width: auto; padding: 0 1px; border-color: #ebebeb silver #7c7c7c;
border-style: solid; border-width: 1px 1px 2px; }
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{ padding: 1px; border-color: #ccc; border-width: 1px; display: block; }
Kevin
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
