Html 定位在锚文本上方的锚命中区域-需要它像默认锚命中区域一样工作吗

我有几个多列下拉菜单作为我的主导航的一部分。由于某种原因，两个多列下拉菜单中每个链接周围的锚命中区域都位于链接本身上方。如何修复它，使命中区域像普通锚一样围绕链接文本中心

以下是网站：

以下是导航的HTML和CSS：

HTML:

---

我使用ZURB基金会5作为前端框架。已经为此工作了好几天&不知道为什么会发生这种情况。欢迎您的支持，非常感谢！谢谢

> P>我查看了你的站点的源代码并尝试了一些东西，发现你的问题是在基础1365的CSS中。只需删除显示：块；你的问题就消失了

从.top bar section.dropdown li删除高度并添加.top bar section li.active:not.has-form a:not.button{lineheight:1；}将是一个很好的开始-如果有效，请告诉我！谢谢你的提示！我最后添加了display:inline！重要的在index.css中添加到.top bar部分ul li>a，这样就不会干扰基金会的工作&它的工作就像做梦一样！多谢！

<nav class="top-bar bottom-bar" data-topbar>
    <section class="top-bar-section">
      <ul class="right">
        <li><a href="clients.html">CLIENTS</a></li>
        <li class="divider"></li>
        <li><a href="company.html">COMPANY</a></li>
        <li class="divider"></li>
        <li><a href="#">DEMO</a></li>
      </ul>
      <ul class="right">
       <li class="divider"></li>
        <li class="has-dropdown not-click">
          <a href="courses/courses.html">COURSES</a>
          <ul class="dropdown dropdown-wrapper mega-menu">
            <li>
              <div>
                <div class="mega-menu-category small-4 columns">
                  <ul>
                    <li><h3>MATH</h3></li>
                    <li class=""></li>
                    <li class="mega-menu-item active"><a href="courses/math/genstudies.html">GENERAL STUDIES</a></li>
                    <li class="mega-menu-item"><a href="courses/math/business.html">FINANCE &amp; BUSINESS</a></li>
                    <li class="mega-menu-item"><a href="courses/math/engineering.html">ENGINEERING &amp; TECHNICAL</a></li>
                  </ul>
                </div>
                <div class="mega-menu-category small-4 columns">
                  <ul>
                    <li><h3>SCIENCE</h3></li>
                    <li class=""></li>
                    <li class="mega-menu-item active"><a href="courses/science/prepphysics.html">PREPERATORY PHYSICS</a></li>
                  </ul>
                </div>
                <div class="mega-menu-category small-4 columns">
                  <ul>
                    <li><h3>MARITIME</h3></li>
                    <li class=""></li>
                    <li class="mega-menu-item active"><a href="courses/maritime/maritime.html#shipsuperintendentmarine">SHIP SUPERINTENDENT (MARINE)</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#shipsuperintendentgeneral">SHIP SUPERINTENDENT (GENERAL)</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#shipsuperintendenttechnical">SHIP SUPERINTENDENT (TECHNICAL)</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#breakbulkshipping">BREAKBULK SHIPPING</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#lngcargooperations">LNG CARGO OPERATIONS</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#maritimelogistics1">MARITIME LOGISTICS 1</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#marineengineering">MARINE ENGINEERING</a></li>
                    <li class="mega-menu-item"><a href="courses/maritime/maritime.html#shipoperations">SHIP OPERATIONS</a></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown not-click">
          <a href="#">INDUSTRIES</a>
          <ul class="dropdown dropdown-wrapper-2 mega-menu-2">
            <li>
              <div>
                <div class="mega-menu-category small-6 columns">
                  <ul>
                    <li><h3>HIGHER EDUCATION</h3></li>
                    <li class=""></li>
                    <li class="mega-menu-item"><a href="industries/highereducationoverview.html">HIGHER EDUCATION OVERVIEW</a></li>
                    <li class="mega-menu-item"><a href="#">TEACHERS</a></li>
                    <ul>
                      <li class="mega-menu-sub-item"><a href="industries/teachersoverview.html">OVERVIEW</a></li>
                      <li class="mega-menu-sub-item"><a href="courses/courses.html">COURSES</a></li>
                      <li class="mega-menu-sub-item"><a href="industries/features.html">FEATURES</a></li>
                      <li class="mega-menu-sub-item"><a href="industries/teacherFAQ.html">FAQ</a></li>
                    </ul>
                    <li class="mega-menu-item"><a href="industries/administrators.html">ADMINISTRATORS</a></li>
                    <ul>
                      <li class="mega-menu-sub-item"><a href="industries/adminoverview.html">OVERVIEW</a></li>
                      <li class="mega-menu-sub-item"><a href="industries/implementation.html">IMPLEMENTATION</a></li>
                      <li class="mega-menu-sub-item"><a href="industries/adminFAQ.html">FAQ</a></li>
                    </ul>
                  </ul>
                </div>
                <div class="mega-menu-category small-6 columns">
                  <ul>
                    <li><h3>MARITIME</h3></li>
                    <li class=""></li>
                    <li class="mega-menu-item"><a href="industries/maritimeindustry.html">MARITIME INDUSTRY</a></li>
                    <li class="mega-menu-item"><a href="industries/maritimeinstitutions.html">MARITIME INSTITUTIONS</a></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="divider"><li>
      </ul>
    </section>
  </nav>  

.bottom-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: #d5b93f;
}

.mega-menu{
    position: relative;
    bottom: 44px;
    left: -220px !important;
    background-color: #d5b93f;
    padding-bottom: 200px;
}

.mega-menu-2{
    position: relative;
    bottom: 44px;
    left: -220px !important;
    background-color: #d5b93f;
    padding-bottom: 200px;
}

.mega-menu-item a{
    height: 20px;
    background: #d5b93f !important;
    font-size: 12px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.mega-menu-sub-item a{
    height: 20px;
    background: #d5b93f !important;
    font-size: 12px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: relative;
    left: 25px;
}

.mega-menu-item a:hover{
    height: 20px;
    background-color: none !important;
    font-size: 12px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.top-bar-section li a{
    background: none !important;    
}

.top-bar-section ul li{
    background: none;
    font-family: "FuturaStd-Book";
    font-size: 20px;
}

.top-bar-section ul li:hover{
    background-color: none;
    font-family: "FuturaStd-Book";
    font-size: 20px;
}

.top-bar-section ul li > a{
    color: #60100f;
    font-family: "FuturaStd-Book";
    font-size: 16px;
}

.top-bar-section ul{
    height: 270px !important;
 }

.top-bar-section .dropdown li{
    height: 20px;
}

.top-bar-section li.active:not(.has-form) a:not(.button){
    padding-left: 0px;
    padding-right: 0px;
}

.mega-menu-category{
    padding-left: 30px !important;
    padding-right: 30px !important;
}

h3
{
  color: #fff !important;
  font-family: "FuturaStd-Book";
}
@media only screen and (min-width: 641px)
{
  .dropdown-wrapper
  {
    background-color: rgba(96, 16, 15, 0.7) !important;
    width: 740px !important;
  }
  .dropdown-wrapper-2
  {
    background-color: rgba(96, 16, 15, 0.7) !important;
    width: 640px !important;
    height: 400px !important;
  }
}