Question

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

只要我将位置更改为绝对位置，它就可以正常工作。

但是，如果您调整屏幕大小，则可以在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中。

子导航扩展了常规导航和未对准

1 个答案: