css - 子导航扩展常规导航和错误对齐

Question

我目前正在开发悬停时会扩展的子导航栏。但是，只要您将鼠标悬停在“管理”上，常规框就会扩展。 (这是由于 .bujar:hover .bujar-content 下的 position: relative)

每当我将位置更改为绝对位置时，它都可以正常工作。

但是，如果您调整屏幕大小，在 position: relative 上它工作得很好!在 position: absolute 上，它在移动设备上不起作用。

这是代码的 CodePen 版本: https://codepen.io/bujars/pen/BgErzp

.bujar:hover .bujar-content {
  position: relative;
  display: block;
  float: left;
  left: 100%;
  top: -35px;
}

<div class="topnav responsive" id="myTopnav">
  <a href="/">Home</a>
  <div class="dropdown">
    <button class="dropbtn">India<i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">Dashboard</a>

      <div class="bujar">
        <button class="bujar-dropbtn" style="
">Manage<i class="fa fa-caret-right"></i></button>
        <div class="bujar-content" style="
 			   /* display: block; */
">


          <a href="#">Manage 1</a>
          <a href="#">Manage 2</a>
          <a href="#">Manage 3</a>
          <a href="#">Manage 4</a>
        </div>
      </div>

      <a href="#">x</a>
      <a href="#">y</a>
      <a href="#">z</a>

      <div class="bujar">
        <button class="bujar-dropbtn" style="
  			  /* color: red; */
">Manage<i class="fa fa-caret-right"></i></button>
        <div class="bujar-content" style="
 			   /* display: block; */
">


          <a href="#">Manage 1</a>
          <a href="#">Manage 2</a>
          <a href="#">Manage 3</a>
          <a href="#">Manage 4</a>
        </div>
      </div>


    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">G<i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">D</a>
      <a href="#">S2</a>

    </div>
  </div>

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>

Answer 1

这个问题可以通过改变.bujar:hover .bujar-content 的位置到absolute 来解决。

要使 position:absolute 在较小的屏幕尺寸上工作，您需要在代码中编辑/一些 css 类。以下是应编辑/添加的类。

.bujar:hover .bujar-content 
 {
   position: absolute;
   display: block;
   float: left;
   left: 100%;
   top:-35px;
 }

@media screen and (max-width:600px)
{

 .topnav.responsive .bujar:hover .bujar-content
 {
   display: block;
   width: 100%;
   text-align: left;
   /* top: 100%;*/  
   left: 5em;  
 }


  .topnav.responsive .bujar-content 
 {
    display: none;
    width: 100%;
    text-align: left;
    /* top: 100%;*/ 
    left: 0;

  }

 }

我还添加了 CSS 以更好地定位第二个嵌套下拉菜单。

  .bujar:hover .bujar-content.lower-me 
  {
     margin-top:8em;
  }

当然，您必须将 lower-me 类添加到具有 bujar-content 类的第二个嵌套下拉 div。