Question : two things with CSS menu

Hi, On this page:

http://code diva sites dot com slash sonoran slash index2.html

On the blue navigation menu, I'm essentially trying to make it higher and put the wording for the longer items on two lines. In the process of doing that, I have two problems that I need help with.

(If you want to see the original menu, it is at:
http://code diva sites dot com slash sonoran)

1. The arrow (hover.gif) is over the text. The blue part of the navigation can be a little higher if necessary.

2. The separator (seperator.gif) is full height on the items that are two or three words, but on Home and Amenities and other one-word items, it doesn't go the full height. I tried fooling it by putting in a word in blue under Amenities, but it doesn't fool that easily.

Thanks!

Answer : two things with CSS menu

Hey there,
Having moved the seperatot.gif to .menu li, telling the image to repeat height and setting a height sorts the seperator problem.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:



.menu li{
float:left;
padding:0px;
padding:0px;background:#3665A7 url("images/seperator.gif") bottom right repeat-y;height:50px;
}
.menu li a{
color:#cccccc;
display:block;
font-weight:normal;
line-height:20px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}