Menu Fade

Hi,


I seem to have a problem with the menu I got which has got a fade effect,as it is set as horizontal well I don't know how can I change it into a vertical menu,as I need it vertical I've been searching for hours for a solution but couldn't find any at all pretty desperate as it is for a project that I promised to a friend. Here is the entire code in css (style) and then the links.
Please help me I would really appreciate it!


#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}

#navMenu li {
float:left;
background:url(default.jpg) no-repeat center center; /* default background image */
width:120px; /* width and height of the menu item */
height:70px;
border-left:1px solid #111; /* simulate pixel perfect using border */
border-right:1px solid #333;
border-top:1px solid #555;
border-bottom:1px solid #333;
position:relative; /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */
}

#navMenu li a {
z-index:20; /* z-index must be higher than .hover class */
display:block; /* display as block and set the height according to the height of the menu to make the whole LI clickable */
height:70px;
position:relative;
color:#777;
}

#navMenu li .hover {
background:url(over.jpg) no-repeat center center; /* mouseover image */
position:absolute; /* must be postion absolute */
width:120px; /* width, height, left and top to fill the whole LI item */
height:70px;
left:0;
top:0;
z-index:0; /* display under the Anchor tag */
display:none; /* hide it by default */
}

#navMenu li.selected {
background:url(selected.jpg) no-repeat center center; /* selected image */
}



<ul id="navMenu">
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#"><b>BIOGRAPHY</b></a></li>
<li><a href="#"><b>SURREALISM ART</b></a></li>
<li><a href="#"><b>VISUAL ART</b></a></li>
<li><a href="#"><b>EVENTS</b></a></li>
<li><a href="#"><b>FORUM</b></a></li>
</ul>

[Edited by MerlinA on 17-Mar-12 09:25]

lose the float on the <li>s so they work as block elements.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

one question is there a way to make the text of the menu smaller? also is there a way to put two colors ,one for hover and another just as visible when the menu appears? how can I do that? I would really appreciate it

regarding on putting vertical thank you a lot I didnt know it was so simple

one question is there a way to make the text of the menu smaller? also is there a way to put two colors ,one for hover and another just as visible when the menu appears? how can I do that? I would really appreciate it.


One more thing is there a way to make the background menu transparent for IE,and all major browsers?


Only these two things and I will stop asking.Please

http://www.w3schools.com/css/css_font.asp

font-size: value in px|em|ex;


Two colours

http://www.w3schools.com/css/css_pseudo_classes.asp

I'd suggest putting some time in at W3schools and learning the basics of HTML and CSS.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

I will do, I'll look into it,thank you so much for your help I really appreciate it!! Have a great weekend !!