Question

我有一个带箭头的菜单我添加了，我希望当用户盘旋到子菜单时必须保持显示即使它将光标传递到空白区域，问题是我的班级“.sub”必须是“位置” ：绝对“，任何想法？

抱歉，我的英语XD

 .color1:hover > div {
        background-color: yellow;
    }
    .sub{
        display: none;
        position: absolute;
    height: 50px;
    width: 160px;
    text-align: center;
    transform: skewX(-15deg);
    background-color: rgba(237, 237, 237, 1);
    vertical-align: middle;
        margin-top: 10px;
    }
    .globalList:hover .sub {
        display: block !important; 
    }
    .globalList > div {
    display: table-cell;
    height: 50px;
    width: 160px;
    text-align: center;
    transform: skewX(-15deg);
    background-color: rgba(237, 237, 237, 1);
    vertical-align: middle;
    }
     .globalList:hover > div:after{
    content: '';
    position: absolute;
    left: 115px;
    margin-left: -74px;
    top: 50px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 10px solid rgba(157, 158, 159, 1);
    clear: both;
}

<html>
    <body>
        <ul class="MyList">
            <li class="globalList color1">
                <div>Menu1</div>
                <ul class="sub">
                    <li class="Sub1"><div>Sublist1</div></li>
                    <li class="Sub2"><div>Sublist2</div></li>
                </ul>
            </li>
             <li>
                 <div>Menu2</div>
                 <ul>
                    <li></li>
                    <li></li>
                 </ul>
            
             </li>
          </ul>
    </body>
</html>

Answer 1

我使用.sub:after添加了一个透明框，现在允许您在不关闭子菜单的情况下让鼠标位于主菜单和子菜单之间。我认为你的意思是白色空间＆＃39;

＆＃13;

.color1:hover>div {
  background-color: yellow;
}

.sub {
  display: none;
  position: absolute;
  height: 50px;
  width: 160px;
  text-align: center;
  transform: skewX(-15deg);
  background-color: rgba(237, 237, 237, 1);
  vertical-align: middle;
  margin-top: 10px;
}

.sub:after {
  content: " ";
  position: absolute;
  top: 0;
  left: -10px;
  width: 170px;
  height: 50px;
  margin-top: -10px;
  background-color: transparent;
  transform: skewX(15deg);
}

.globalList:hover .sub {
  display: block !important;
}

.globalList>div {
  display: table-cell;
  height: 50px;
  width: 160px;
  text-align: center;
  transform: skewX(-15deg);
  background-color: rgba(237, 237, 237, 1);
  vertical-align: middle;
}

.globalList:hover>div:after {
  content: '';
  position: absolute;
  left: 115px;
  margin-left: -74px;
  top: 50px;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 10px solid rgba(157, 158, 159, 1);
  clear: both;
}

＆＃13;

<ul class="MyList">
  <li class="globalList color1">
    <div>Menu1</div>
    <ul class="sub">
      <li class="Sub1">
        <div>Sublist1</div>
      </li>
      <li class="Sub2">
        <div>Sublist2</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Menu2</div>
    <ul>
      <li></li>
      <li></li>
    </ul>

  </li>
</ul>

＆＃13;

Answer 2

在您的 .globalList 中添加padding-bottom。

喜欢这个：

.globalList{
  padding-bottom:10px;
}

或更好：（这是相同的，但你不能添加到每个第一个 li 和.globalList类）

.MyList > li {
 padding-bottom: 10px;
}

保持SubMenu显示在悬停空白处

2 个答案: