下拉悬停不会保持不变

时间:2017-09-21 17:09:55

标签: html css drop-down-menu hover

我正在尝试将此下拉菜单设置在固定的顶栏中 我看了很多教程和论坛,但没有任何帮助。

我不能:

  1. 当我从“Trabalhos”按钮上取下光标时,让下拉静止。
  2. 当子菜单显示时,使顶部栏元素保持不变 - 按钮“Contato”离开栏,就像它漂浮一样。
  3. Here is the code in CSSDesk(请隐藏html / css侧边栏,以便您可以看到主要问题:当光标绕过“Trabalhos”按钮时,许多开/关悬停会闪烁。)

    我刚开始,所以如果我的代码很乱,我很抱歉(如果确实是这样,请告诉我!)

    #fixtop {
      width: 100%;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.3);
      float: left;
      position: relative;
    }
    
    #fixtop>ul {
      margin: 10px auto;
      color: white;
      font-size: 1.5em;
      display: table;
      list-style: none;
    }
    
    #fixtop>ul>li {
      padding: 0 90px 0 90px;
      cursor: default;
      transition: 0.2s;
      float: left;
    }
    
    #fixtop>ul>li>a:hover {
      color: yellow;
      transition: 0.2s;
    }
    
    #topbuttons #bottrab:hover~#submenu {
      display: table;
    }
    
    /*SUBMENU AREA*/
    
    #submenu {
      position: relative;
      display: none;
    }
    
    #submenu>a {
      padding: 10px;
      position: relative;
      top: 50px;
      width: 300px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      font-size: 0.8em;
      text-align: center;
      color: white;
      background: rgba(0, 0, 0, 0.5);
      display: block;
      z-index: 3;
      border-radius: 2px;
    }
    
    #submenu>nav>a:hover {
      background: rgba(0, 0, 0, 0.7);
      transition: 0.2s;
    }
    <header id="fixtop">
      <ul id="topbuttons">
        <li><a href="#">Sobre mim</a></li>
        <li><a href="#" id="bottrab">Trabalhos</a>
          <div id="submenu">
            <a href="#">Manipulação de imagem</a>
            <a href="#">Diagramação</a>
            <a href="#">Programação Web</a>
            <a href="#">Design de logo</a>
          </div>
        </li>
        <li><a href="#">Contato</a></li>
      </ul>
    </header>

1 个答案:

答案 0 :(得分:3)

由于子菜单是主菜单元素的子菜单,因此它会在显示时扩展该主菜单元素的大小。因此,菜单项远离鼠标光标。如果是这样,子菜单关闭,主菜单项在鼠标光标下移回。此循环导致悬停和非悬停状态之间的振动。

一种解决方案是将子菜单设置为position:absolute,以便从文档流中删除它。但这也意味着主菜单项的悬停区域将不包括子菜单的区域,因此当鼠标远离主菜单项时,子菜单将关闭。为解决此问题,我在:hover元素本身添加了另一个#submenu定义。

#submenu {
  position: absolute;
  display: none;
}

#topbuttons #bottrab:hover~#submenu,
#submenu:hover {
  display: table;
}

下面的工作示例:

&#13;
&#13;
#fixtop {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  position: relative;
}

#fixtop ul {
  padding: 0;
  margin: 10px 0;
  color: white;
  font-size: 1.2em;
  display: table;
  list-style: none;
}

#fixtop ul li {
  padding: 0 20px;
  cursor: default;
  transition: 0.2s;
  float: left;
}

#fixtop ul li>a:hover {
  color: yellow;
  transition: 0.2s;
}

#topbuttons #bottrab:hover~#submenu,
#submenu:hover {
  display: table;
}


/*SUBMENU AREA*/

#submenu {
  position: absolute;
  display: none;
}

#submenu a {
  padding: 10px;
  position: relative;
  top: 18px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 3;
  border-radius: 2px;
}

#submenu a:hover {
  background: rgba(0, 0, 0, 0.7);
  transition: 0.2s;
}
&#13;
<header id="fixtop">
  <ul id="topbuttons">
    <li><a href="#">Sobre mim</a></li>
    <li><a href="#" id="bottrab">Trabalhos</a>
      <div id="submenu">
        <a href="#">Manipulação de imagem</a>
        <a href="#">Diagramação</a>
        <a href="#">Programação Web</a>
        <a href="#">Design de logo</a>
      </div>
    </li>
    <li><a href="#">Contato</a></li>
  </ul>
</header>
&#13;
&#13;
&#13;