Drop down menu ccs help

[otuatail]

Hi I have a temporary web page with a drop down menu. Problem is to get rid of the gap on the drop down menus. Any help please

 

 

 

www.des-otoole.co.uk/top_menu

 

[Psycho]

Odd. When I download all your content locally (htm, css, js & images) there is no gap. But, I do see the gap on your hosted site. I was able to simulate the gap by inserting a margin into the css code for the UL. So, it may have a default of 1px margin. Try adding an explicit 0px margin

 

 

#nav li ul /* Default location */
{
  position: absolute;
  width: 101px;
  left: -300px;
  border-width: 1px;
  border-left: 0px solid;
  border-right: 0px solid;
  padding-left: 0px;
  margin: 0px; <<== ADD THIS LINE
}

[otuatail]

Hi I have added the line you suggested but it made no difference. I also have got the line * {margin:0; padding:0} at the top of the CSS file.

 

I have tested this out on

IE 11

Firefox 32

Opera 25

Chrome 38 AND

Safari 5.1

 

 

They all have a gap between the top menu Brahms | Mozart and the sub menus below.

 

[Psycho]

As I said, when I copied all your files down locally it doesn't happen. I only see the problem when viewing your page at the URL provided. Doesn't make any sense. Maybe I missed something, but I don't think so.

 

I dig into the JavaScript code, but it could possibly be referencing something that is causing it. You could also try using a margin of -1 in the above (it should just need to be margin-top or margin-bottom). But, I would consider that as a kludge solution.