【发布时间】：2014-08-02 01:10:41
【问题描述】：
我有几个多列下拉菜单作为我的主要导航的一部分。由于某种原因，两个多列下拉菜单中每个链接周围的锚点命中区域位于链接本身上方。如何修复它，使点击区域像普通锚一样以链接文本为中心？
这里是网站：
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 & 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 作为前端框架。已经为此工作了几天，无法弄清楚为什么会这样。欢迎并非常感谢您的所有支持！谢谢！！
【问题讨论】：
-
删除 .top-bar-section .dropdown li 的高度并添加 .top-bar-section li.active:not(.has-form) a:not(.button) { line-高度：1； } 将是一个好的开始 - 如果可行，请告诉我！
标签： html css zurb-foundation