title: Space between menu and drop down menu
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Below is the code but feel free to view here:
  <a href="http://questionsdefemmesrevue.com/newTemplate/" rel="nofollow" title="link">link</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="menu-box fl"&gt;
  
  &lt;ul class="menu"&gt;
  
    &lt;!-- Begin Item With Drop --&gt;
    &lt;li class="drop"&gt;
      &lt;a href="#"&gt;&lt;span class="big-text"&gt;menu&lt;/span&gt;&lt;/a&gt;
  
      &lt;!-- Begin Toggle Icon --&gt;
      &lt;span class="toggle"&gt;&amp;nbsp;&lt;/span&gt;
      &lt;!-- End Toggle Icon --&gt;
  
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;CSS &amp; XHTML&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Javascript&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Illustrator&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Dreamweaver&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;!-- End Item With Drop --&gt;
  
  &lt;/ul&gt;
  
  
  &lt;/div&gt;&lt;!--end menu--&gt;
  &lt;div class="social fl"&gt;
  &lt;/div&gt;&lt;!-- end social--&gt;
  &lt;div class="email fr"&gt;
  &lt;/div&gt;&lt;!--end email--&gt;
  
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!--end nav-inner--&gt;
  
  &lt;/div&gt;&lt;!--end nav--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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%;
  }
  </code></pre>