我有几个多列下拉菜单作为主导航的一部分。两列多列下拉菜单中每个链接周围的锚点区域由于某种原因位于链接本身之上。如何修复它，以便命中区域围绕链接文本居中，就像普通锚点一样？
这是网站：
http://www.zrrdigitalmedia.com/_ADU/index.html
这是HTML＆amp;导航的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 & BUSINESS</a></li>
<li class="mega-menu-item"><a href="courses/math/engineering.html">ENGINEERING & 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作为前端框架。几天来一直在研究这个问题。无法弄清楚为什么会这样。您的所有支持都受到欢迎＆amp;非常感激！谢谢!!
答案 0 :(得分：0)
我查看了您网站的源代码并尝试了一些事情，发现您的问题在foundation.css的第1365行。只需删除display:block;，您的问题就会消失！