菜单和下拉菜单之间的空间

Question

我希望下拉菜单显示在主菜单区域的边框线下方，而不是显示在“菜单”标题/按钮的正下方。我可以更改定位，使其更低，但中间有死区，无法将鼠标悬停在下拉菜单上。

我不想在下拉列表上方添加填充，因为这只会创建更多紫色空间，我希望该空间为空。

以下是代码，您可以在这里查看： 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

尝试在你的 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 */ 
}

看到这个JSFiddle

我认为应该在不干扰页面布局的情况下实现您的需求。

Answer 2

你可以绝对定位你的 ul:hover 并添加 top:60px;它的样式

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;
}