html - 位于 anchor 文本上方的 anchor 命中区域 - 需要它表现得像默认 anchor 命中区域一样

Question

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

这是网站:

http://www.zrrdigitalmedia.com/_ADU/index.html

这是导航的 HTML 和 CSS:

HTML:

<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>  

CSS:

.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;
  }
}

我使用 Zurb Foundation 5 作为前端框架。已经为此工作了好几天并且无法弄清楚为什么会这样。欢迎并非常感谢您的所有支持!谢谢!!

Answer 1

我查看了您网站的源代码并尝试了一些东西，发现您的问题出在 foundation.css 的第 1365 行。只需删除 display:block;，您的问题就会消失!