Space between menu and drop down menu

Question

I'd like for the drop down menu to show below the border line in the main menu area instead of showing up right underneath the 'menu' title/button. I can change the positioning so that it is lower but then there is dead space in between that makes it impossible to mouse over the drop down menu.

I don't want to add padding above the drop down because that just created more purple space, where I want that space to be empty.

Below is the code but feel free to view here: link

html:

<div class="menu-box fl">

<ul class="menu">

  <!-- Begin Item With Drop -->
  <li class="drop">
    <a href="#"><span class="big-text">menu</span></a>

    <!-- Begin Toggle Icon -->
    <span class="toggle">&nbsp;</span>
    <!-- End Toggle Icon -->

    <ul>
      <li><a href="#">CSS & XHTML</a></li>
      <li><a href="#">Javascript</a></li>
      <li><a href="#">Photoshop</a></li>
      <li><a href="#">Illustrator</a></li>
      <li><a href="#">Dreamweaver</a></li>
    </ul>
  </li>
  <!-- End Item With Drop -->

</ul>


</div><!--end menu-->
<div class="social fl">
</div><!-- end social-->
<div class="email fr">
</div><!--end email-->

<div class="clear"></div>

</div><!--end nav-inner-->

</div><!--end nav-->

CSS:

.nav {
height: 65px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;  
font-family: 'Raleway', sans-serif;
}
.nav-inner {
width:1000px;
margin-left:auto;
margin-right:auto;
height:65px;    
}

.menu-box {
width: 200px;
height: 100%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
}
ul.menu {
list-style-type:none;
margin:0;
padding:20px 0 0 6px;
position:relative;
float: right;
}
ul.menu li {
display:block;
height: 30px;
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 */

}
li.drop a {
color:#333;
line-height:30px;
}
ul.menu li ul li a {
color:#ffffff;
}

ul.menu li:hover {
width:140px;
color:#fffff;

}

.big-text {
font-size:1.5em;
}
ul.menu li.drop span.toggle {
display:block;
float:left;
width:31px;
height:30px;
background:transparent url("images/toggle1.png") no-repeat 0 -30px;
padding:0;
margin:0 7px 0 0;
color:#ffffff;
cursor:pointer;
}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle {
background-position:0px 0px;
}

ul.menu li.drop:hover ul {-webkit-border-radius: 5px;
border-radius: 5px;
display:block;
z-index:1;
position: absolute;

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

}

ul.menu li ul li {
float: none;
height: auto;
margin: 0;
filter: alpha(opacity=100); /* internet explorer */
color: #ffffff;
border-bottom-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FFF;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
ul.menu li ul li a {
padding-left:5px;
padding-right:5px;
}

.social {
width:300px;
height:100%;
}
.email {
width:500px;
height:100%;
}

Answer 1

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.

Answer 2

You can position your ul:hover absolutely and add top:60px; to it's styling

ul.menu li.drop:hover ul {
-webkit-border-radius: 5px;
border-radius: 5px;
display: block;
z-index: 1;
position: absolute;
z-index: 100;
padding-bottom: 8px;
top: 60px;
}