I have to make a drop down menu, but I have a problem.

First, my background image is not in 'the harmony' with letters.I want one image for one point in menu.Now it looks like this:

Second, my cursor stays on the first level of menu, second too, but in the third level-menu runs from my cursor.Like something is disturbing it, for example images.I tried to delete them, but this repeats.

This also happens:

Why are they so far?Because, they have blank between, I can't choose anything from the sub-menu.

Whole menu is here : http://citfree.quotaless.com/neshko/index.html

And the css code is:

ul {
list-style: none;

}

ul a {

text-decoration: none;
padding: 0px 12px;
}

ul a:hover {
text-decoration: none;
}

ul li {
float: left;
position: relative;
}
ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 100%;
display: none;
width: 125px;
background-image:url(navig1.gif);
background-repeat:repeat-y;
}
ul li:hover ul { display: block; }
ul li:hover ul li ul { display: none; }

ul li ul li:hover ul {
display: block;
position: absolute;
left: 140px;
top: -1px;
background-image:url(navig1.gif);
background-repeat:repeat-y;
}

Can somebody tell me where I'm wrong?

Thanks.

The problem is occuring due to

ul a {
text-decoration: none;
padding: 0px 12px;
}

here the <a> is given a top and bottom padding of 12px (basically for main navigation) so its diplaying like that.

You have to redefine the style of <a> bye nesting it for the drop menu style.. like this

ul li ul a {
padding:0 5px; 
}

This value is just given for example, measure ang give it as much you require..

Hi NattyDread,

You have a few problems here.

First, you are using a background image for the <ul> when you would be better having a backgound image for each <a> or <li>.

Secondly, change

ul li ul li:hover ul {
display: block;
position: absolute;
left: 140px;
top: -1px;
background-image:url(navig1.gif);
background-repeat:repeat-y;
}

to

ul li ul li:hover ul {
display: block;
position: absolute;
left: 40px;<!-- this needs to be altered to make it work-->
top: -1px;
background-image:url(navig1.gif);
background-repeat:repeat-y;
}

At the moment your 3rd nested list is positioned 140px to the right of your 2nd nested list.

I hope that helps.

Ok, thanks This solves the problem indeed