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查询或调整最大宽度。

对于悬停时闪烁的部分，是因为您选择了将消失的子菜单栏以及将显示并移到左侧的子菜单。尝试将鼠标悬停在右侧的下拉栏上，它不会闪烁。

更改子菜单的左侧

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

1 个答案: