Need some help with horizontal sub navigation menu

[wonderland]

Hi,

I have a horizontal submenu using unordered list and 4 images. You can see it here

I want to have some text above this image (section 1 , section 2 , etc)

If I add this text everything goes wrong with this menu, you can see that here

what should I do to fix this ? I've considered adding image with text , but I would like to also use a mouse over effect on this text.

THank you :)

[hericles]

I take it you want the text to be over the image and larger. You can add the text to the image and still use roll overs if you want. Or you can use the background0image property of the div to have your text in a div and the image as its background.

Hope that helps,
Hericles

[wonderland]

Is it possible to do this without text being part of image ? So that each time I want to change that text I don't have to re-upload whole image /.

[almostbob]

likely not a perfect solution,
ruminate while we illuminate, the possibilities

styles belong in the stylesheet so

<ul>
<li id='menu1')>Menu1</ul>
<li id='menu2')>Menu2</ul>
<li id='menu3')>Menu3</ul>
</ul>

which Could be css-ed

li#menu1 { height:/*height of image*/; width:/* width of image*/;background-image:url('menu1.png');color:black }
li#menu2 { height:/*height of image*/; width:/* width of image*/;background-image:url('menu2.png');color:black }
li#menu3 { height:/*height of image*/; width:/* width of image*/;background-image:url('menu3.png');color:black }
/* and mouseover effects something like */
li#menu1:hover { /*not necessary to repeat unchanged items */ color:PINK }
li#menu2:hover { /*not necessary to repeat unchanged items */ color:PINK }
li#menu3:hover { /*not necessary to repeat unchanged items */ color:PINK }

I use 3dapperance.png-s with a transparent background, the hover effect changes background and text colors, looks good
css is four state, derfault hover active visited, there are lots of fun things to play

[wonderland]

Thank you,

Will try this out :)