seasoned veterans of CSS, please take a look at this link:


http://www.bsplumbandelectric.co.uk

its a basic html static website hand/hard coded by myself from scratch. Its no where near finished - but the home page is.


initially I had made it work - but for some reason when you hovered over the main menu links the drop down menu would collapse and REMAIN there once you moved your cursor away - this was most bizzare.

I have no idea why this was happening - so i ended up keeping it simple - 1 level menu instead.

if you can make sense of the basic menu css styling - and can understand what i was doing wrong or rather, how I can actually achieve the drop down menu for me current menu - that would be much appreciated.


I would want a drop down menu when the user hovers over 'facilities' , and under that I want 'Pool Tables' , 'Snooker Tables', 'The Diner' and 'The Bar'.

The sub menu links will be of equal size and length of the menu links of the menu themselves.

i wanted the parent menu links to be of same size and to occupy all 60em of the width - i acheived that adding this style:

#nav li {
float: left; width:12em; }

so home, our facilities, etc are all of same length and fill up the entire 60em width nicely.

is this the reason im finding creating the sub menus tricky ?

surely it can't be - the white strip on which the menu links appear are contained in a nav bar holder element i named it that way for ease of understanding - its white in background and as you can see is 100% in width.

its inside this that the nav li resides.

perhaps one must look at my stylesheet for this and begin to realise what the shortcomings may be - either way if anyone can get a basic insight into how I can achieve a basic drop down menu using css under the link 'our facilities' it would be much appreciated.

thanks.