Space between menu and drop down menu

Try changing these two things in your css:

ul.menu li {
  display:block;
  height: 50px; /* CHANGED THIS FROM 30px TO 50px */
  float:left;
  position:relative;
  margin:0 9px 0 0;
  padding:0;
  width:140px;
  filter: alpha(opacity=75); /* internet explorer */
  -khtml-opacity: 0.75;      /* khtml, old safari */
  -moz-opacity: 0.75;       /* mozilla, netscape */
  opacity: 0.75;           /* fx, safari, opera */
}

ul.menu li ul {
  display:none;
  position:absolute;
  width: 100%;
  top:30px;
  margin-top: 18px; /* ADDED THIS VALUE */
  left:0;
  list-style-type:none;
  padding-top:10px;
  background:#461b47;
  filter: alpha(opacity=75); /* internet explorer */ 
}

See this JSFiddle

I think that should achieve what you need without interfering with the layout of the page.