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

Posted 2023-03-06

【中文标题】菜单和下拉菜单之间的空间

【英文标题】：Space between menu and drop down menu

【发布时间】：2013-11-18 03:55:59

【问题描述】：

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

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

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

【问题讨论】：

请不要链接到实时网站。阅读：meta.stackexchange.com/questions/125997/…

【参考方案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

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

【参考方案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;

【讨论】：

唯一的问题是我无法进入下拉菜单，一旦我将鼠标从主菜单按钮上移开，下拉菜单就会消失