主下拉菜单中的 HTML 子菜单显示远离主下拉菜单

阿伦先生

如何消除主下拉菜单和子菜单之间的差距？当我在下拉菜单中添加更多内容时，子菜单和主下拉菜单之间的差距也会增加。如果我将鼠标指针放在主下拉菜单和子下拉菜单之间，它会闪烁。我在此处发布屏幕截图以及 CSS 和 HTML：

    .nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}

.nav-menu > ul > li + li {
  padding-left: 20px;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #1a000d;
  padding: 14px 0 15px 0;
  transition: 0.3s;
  font-size: 14px;
  font-weight:bold;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #005ce6;
  text-decoration: none;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 20px;
  top: calc(100% - 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
 
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  color: #1a000d;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #005ce6;
  font-size: 14px;
  font-weight:bold;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}

 <nav class="nav-menu d-none d-lg-block">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Gallery</a></li>
          <li class="drop-down"><a href="">Courses</a>
            <ul>
              <li class="drop-down"><a href="#">IELTS Regular</a>
               <ul>
                  <li><a href="#">Academic Training</a></li>
                  <li><a href="#">General Training</a></li>
                  
                </ul>
              </li>
              <li class="drop-down"><a href="#">IELTS WEEKEND BATCH</a>
                <ul>
                  <li><a href="#">Academic Training</a></li>
                  <li><a href="#">General Training</a></li>
                  
                </ul>
              </li>
             
             
               <li><a href="#">IELTS ONLINE</a></li>
               
               <li class="drop-down"><a href="#">OET Regular</a>
                <ul>
                  <li><a href="#">Listening sub-test</a></li>
                  <li><a href="#">Reading sub-test</a></li>
                  <li><a href="#">Speaking sub-test</a></li>
                  <li><a href="#">Role-plays</a></li>
                  <li><a href="#">Writing sub-test </a></li>
                 
                  
                </ul>
              </li>
              
              <li><a href="#">OET Online</a></li>
               <li><a href="#">DHA, HAAD, MOH, Prometric </a></li>
               
                <li class="drop-down"><a href="#">7 Days crash course for Nurses</a>
                <ul>
                  <li><a href="#">PROMETRIC EXAM for SAUDI</a></li>
                  <li><a href="#">PROMETRIC EXAM for OMAN</a></li>
                  <li><a href="#">PROMETRIC EXAM for QATAR</a></li>
                  <li><a href="#">DHA for DUBAI</a></li>
                  <li><a href="#">HAAD for ABU DHABI</a></li>
                 
                  
                </ul>
              </li>
              
               <li><a href="#">RN Regular</a></li>
               
               
                <li class="drop-down"><a href="#">10 Days Pharmacy Crash Course</a>
                <ul>
                  <li><a href="#">HAAD</a></li>
                  <li><a href="#">DHA</a></li>
                  <li><a href="#">MOH</a></li>
                  <li><a href="#">PROMETRIC</a></li>
                    
                </ul>
              </li>
              
              <li class="drop-down"><a href="#">PHARMACY REGULAR COURSE</a>
                <ul>
                  <li><a href="#">PEBC</a></li>
                  <li><a href="#">CAPS</a></li>
                  <li><a href="#">OSPAP</a></li>
                  
                    
                </ul>
              </li>
              
              
            </ul>
          </li>
          
          
          <li><a href="">Exams</a></li>
          <li><a href="">Jobs</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Career</a></li>
         
          <li><a href="contact.html">Contact</a></li>
          <li><a href="">Login</a></li>
           <li ><a class="onlineclass" href="">Online class</a></li>
          

        </ul>
      </nav>

黑暗骑士

如果要在缩放 100 时使子菜单栏相同，则应进行另一个 @media 查询或调整 max-width。

对于悬停时闪烁的部分，这是因为您正在选择将消失的子菜单栏和将显示并转到左侧的子菜单。尝试从右侧悬停下拉栏，它不会闪烁。

更改子菜单的左侧

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。