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

Question

如何消除主下拉菜单和子菜单之间的差距？当我向下拉菜单添加更多内容时，子菜单和主下拉菜单之间的差距也会增加。如果我将鼠标指针保持在主下拉菜单和子下拉菜单之间，它会闪烁。我将屏幕截图与 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>

Answer 1

如果你想让子菜单栏在缩放 100 时保持不变，你应该再做一次@media 查询或调整 max-width。

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

更改子菜单的左侧

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

HTML submenu in main dropdown is displaying away from the main dropdown

html

css

menu

submenu

dropdown