You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Mar 01

Vertical CSS menu with flyout submenu, finalized!

2004 at 12.09 pm posted by Veerle Pieters

By starting all over again I was able to fix the "jumping" error in IE 6
(see my post the day before yesterday).

Vertical CSS menu with flyout submenu

The main problem was because I added a fixed height and width in the li.folder selector which defines the style for the main menu. If I leave this part out, the error disappears. I use only padding in my new stylesheet to define the height of the button and to position the text in the button. The width of this menu is already defined by the HTML selector ul. So there's no need to define the width in the li.folder class.

This was the BAD code:

  1. li.folder {
  2. font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
  3. background-color: #EFEFEF;
  4. display: block;
  5. padding-left: 15px;
  6. padding-top: 5px;
  7. border-top: 1px solid #FFFFFF;
  8. border-bottom: 1px solid #CCCCCC;
  9. width: 135px;
  10. height: 23px;
  11. }

The code should look like this:

  1. li.folder {
  2. font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
  3. padding: 2px 0 4px 15px;
  4. background-color: #EFEFEF;
  5. border-top: 1px solid #FFFFFF;
  6. border-bottom: 1px solid #CCCCCC;
  7. }

I know this sounds very illogical, but with IE everything is. To give you another example, remove background: #fff; property in the ul selector in my new stylesheet and see what happens in IE 6. You'll notice that you won't be able to rollover the submenu items. I was doing some "clean up" in my stylesheet and I thought this piece of code was unnecessary since it doesn't need any background color defined, right? My buttons are gray and this is already defined in the li.folder selector. So it has to stay there for another illogical IE.

Look at my files:

The other problem with the overlapping of the dropdowns has been solved by altering my layout (which I like more now). But if you are really looking for a fix, then this example might help.

UPDATE: more about these menus can be found here (via Aleksandar).


14served

gravatar

1

permalink this comment Blob Mon Mar 1, 2004 at 02.10 pm

Oh yeah i already have problems with IE pc and heigh… It seems it’s a source of lot of problems. Good to know that.


gravatar

2

permalink this comment FrozenToast Mon Mar 1, 2004 at 02.56 pm

{well done}

good work! :)


gravatar

3

permalink this comment Kishen Mon Mar 1, 2004 at 03.47 pm

Great Job Veerle! Love your work!


gravatar

4

permalink this comment travis Mon Mar 1, 2004 at 05.38 pm

Congratulations and thanks for the excellent writeup! :)

I really like the artwork you put in the new version.  You have such a good eye for design…


gravatar

5

permalink this comment Steven Fri Mar 5, 2004 at 10.45 pm

is the hover/dropdown supposed to overlap the menu in firefox?


gravatar

6

permalink this comment Veerle Sat Mar 6, 2004 at 02.14 am

@Steven, yes I changed that from previous version because I like it better this way.


gravatar

7

permalink this comment Keith Montgomery Mon Sep 27, 2004 at 03.25 pm

Veerle,

Your menu is very nice; is there a way to create another level of submenus?


gravatar

8

permalink this comment Veerle Tue Sep 28, 2004 at 03.47 am

@Keith, I guess if you use another nested li level with an ul class level3 you could achieve that. I haven’t tried this but I think it would be no problem. Personally I would do this just because I think it wouldn’t user friendly anymore.


gravatar

9

permalink this comment Darren White Fri Oct 1, 2004 at 05.04 am

I’ve tried nesting a third level but to no avail, not sure if anyone will come across this but if you do and have any ideas. Visit here: APHC ,that would be great.

Veerle that was a great help I been visiting for about 8 months now but have only just posted. Just wanted to let you know that your articles are an inspiration and very helpful.


gravatar

10

permalink this comment Aleksandar Thu Dec 30, 2004 at 03.57 am

Veerle, the URL you posted at the end (for ADxMenu) is an outdated one. Correct URL is:
http://www.aplus.co.yu/adxmenu/examples/winxp/standard/index.html (this particular example) while
http://www.aplus.co.yu/adxmenu/intro/ is the overal story about the menu.

I’m glad you like it.


gravatar

11

permalink this comment Veerle Thu Dec 30, 2004 at 11.14 am

Hi Aleksandar, I’ve adjusted the link and added the other one too, thanks ;-)


gravatar

12

permalink this comment Jont Fri Aug 19, 2005 at 10.35 am

Excellent find for a CSS novice. I am trying to move one of the 2nd level flyouts upwards so when I hover over the first level the flyout almost centres on the master (if that makes sense) ... basically I have a long 2nd level against one level1 and I need to shunt it upwards to fit on the page but can’t see how… any suggestions most welcome? Thanks


gravatar

13

permalink this comment camperb Mon Apr 3, 2006 at 10.58 am

Menu does not work in IE 7, the future for most microsoft users.


gravatar

14

permalink this comment Ludwig Wendzich Sun Apr 16, 2006 at 04.38 am

A definite bookmark to study for when I’m more awake! A wonderful effect!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist