Yes I read the suckerfish article and spent all day reading several other articles on CSS menus from lists. The suckerfish version sets up the 'ul' with an ID. In your solution, you nest the list in a 'div' tag which has the ID, so you expended on it so the 'ul' doesn't need an ID.
A lot of people are using that javascript to make IE respond to the hover events. I really couldn't adapt any of them to do what I want, so coded my own (based on the vertical menu at http://www.seoconsultants.com/css/menus/vertical/) which refers to 'level1', 'level2'... This one uses a bigger javascript that parses the CSS file and fixes it for IE. It's a bit more complicated and would rather use the simpiler solution. I usually like them to overlap a little, but since the sub-menus are children of the top menu, their edge gets hidden behind the top menu items that lie below because of default stacking order. 'z-index' doesn't work for 'li' elements, so everything in the list would need to be nested in 'div' tags to use 'z-index'. What's weird is 3rd level menus overlap OK. This has something to do with 'level1' being defined one way (with an image and spacing), and 'level2' and above sharing a different definition. So it works, but I just can't overlap the sub-menus. I'm going to go back to your version and try the mods you suggest. -----Original Message----- From: [email protected] [mailto:[EMAIL PROTECTED] Sent: Tuesday, October 18, 2005 3:50 AM To: [email protected] Subject: Re: [magnolia-user] [magnolia-dev] JasperException - Unable to load tag handler class From thread: http://thread.gmane.org/gmane.comp.cms.magnolia.devel/4300 in dev list. Robert Van Overmeiren wrote: > I see. I knew you could do various behaviors with CSS, and that a list > could be styled inline, but I didn't realize that people have been > implementing whole cascading menus with CSS and NO JAVASCRIPT for a > FEW YEARS now. Well, this solution does actually use Javascript, but only because of the limitations in IE. > I want a vertical menu, so just removed the 'float:left' you have for > 'all lists'. I read a little about 'CSS Float', but don't see why it > lines your items up the way it does. Why not 'float:right' since each > item goes to the right of the previous item? Why not 'display:inline' > which is for lining items up? > Float will float an element relative to its container. To achieve what (I think) you want, do the following (leave float as is): Under: #horMenu ul { /* all lists */ add: width:14.5em; Under: #horMenu li { /* all list items */ add: width:14.5em; Under: #horMenu li ul add: margin-left:14.5em; and: margin-top:-1.5em; > > The menu I'm trying to recreate has a right pointing arrow image to > the left of the 1st level text labels. I added it in with CSS... > ...but I need a little space between the image and text, so I'm trying > to figure out how to make that happen. When I add padding, it pads the > text label, but not the image. > Try adding the spacing in the image itself? The code above should help you achieve what you want. There is more information at http://www.htmldog.com/articles/suckerfish/dropdowns/, our code is based on this with some changes for better accessibility. HTH John -- John Olival Novasoft Explican ---------------------------------------------------------------- for list details see http://www.magnolia.info/en/magnolia/developer.html ---------------------------------------------------------------- ---------------------------------------------------------------- for list details see http://www.magnolia.info/en/magnolia/developer.html ----------------------------------------------------------------
