So for school we have to construct a website and we have been taught how to do all the basics, but I being the ambitious individual i am tried making drop-down menus using only CSS, and im failing to figure out something.

http://imageshack.us/photo/my-images/535/failcss.png

The First part of the image is the mouse over the catagory, it then stays as a drop-down at the first item in the menu like in the second part, but then when i try move to the 2nd item it disappears and appears as the 3rd part.
the basis of the page is in there
http://pastebin.com/B7sr22iU

and this is the CSS im using
http://pastebin.com/YhTbGB1x


My knowledge of CSS spans about 2 online tutorials, and this free example I gutted and reused (which may be where the problem lies)

Thanks in advance for any help that can be given.

edit: also the bar doesn't sit on top of the image (which should be ignored its from an old test) but that's easy to fix with me just playing around