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
----------------------------------------------------------------
