[Solved] Vertical graphic menu with flyout

This is for a horizontal menu, but the concept's the same:

http://www.tyssendesign.com.au/articles/css/single-image-replacement-rollovers-with-suckerfish-dropdowns/

Thanks! I will give it a go!

Can he convert it to a vertical menu by removing the float left from this portion of the code?

.nav li { float: left; padding-bottom: 10px; }

Zygote

Hey Tyssen,

I am trying out this tutorial, but am having a hard time converting it to a vertical menu from the horizontal. I have managed to get all the links in fine but the rollovers are not working. Do you (or anyone else) know where I could look at a vertical version of this?

Thanks!

I just built a vertical flyout menu

http://www.anchordigital.net/abm/index.php

you can rip out the code from there.

Thanks Deuce, thats really nice of you!

Unfortunately I am looking for code that would allow me to use graphics instead of text for the links.

then replace the text for images. :?

Can you show us what you've got so far?

Hmm, well I think if I just replace the text list with images I would have to use some kind of javascript to make the rollovers if I just use the current code that you have on your site wouldn't I? Again, I am a newbie so I really dont know all the short cuts or common sense solutions using CSS that is why I am asking all you experts

I spose I just got take some time to understand it.

Thanks.

Well this is what I have so far, I think I have the whole graphic link and rollover side of it down and converting to the vertical layout, but I dont know why it has that huge indent to the left and the flyout contains the main rollover graphic.

http://jannahlyon.com/testing/navigation.html

Thanks for th help all!

Take the em out of the submenus and set the margin and padding to all the <ul>s in the menu to 0.

Thanks Tyssen that totally worked! Thanks so much for all you help!