如何消除ASP.NET MVC导航栏列表项底部的空白区域

问题现象 #

ASP.NET MVC项目中使用Bootstrap导航栏，鼠标悬停Home、About Us时，背景色无法填充整个列表项区域，底部存在空白；但Services、SignUp、Login的悬停显示正常。已尝试给li元素设置margin:0，无效果。

问题原因 #

核心差异来自导航项的内容载体：

• Home、About Us使用<a>标签，Bootstrap默认给.navbar-nav > li > a的padding值与自定义的.Dropdown-btn不一致，且<a>标签未占满列表项的全部高度，导致悬停背景仅覆盖自身区域，无法填满整个li。
• Services使用自定义的.Dropdown-btn按钮，设置了btn-block和匹配导航栏高度的padding:13px 13px，自然填满了整个列表项。

解决方案 #

统一导航栏内<a>标签和按钮的padding值，并确保<a>标签占满列表项高度：

1. 修改CSS中.navbar-inverse .navbar-nav > li > a的样式，添加padding并设置为块级元素
2. 修正原CSS中color: white important;的语法错误（应为color: white !important;）

修改后的完整CSS代码 #

.navbar {
    font-size: 1.25em !important;
    box-shadow: 0px 0px 3px 0.5px black;
    border : none;
}

.navbar-inverse {
    background-color: #00ff99 !important;    
}

.navbar-toggle {
    background-color: #00804d;
}

.navbar-inverse .navbar-brand {
    color: #000099 !important;
    font-family: 'Brush Script MT' !important;
    font-size: 1.50em !important;
    font-weight: 400 !important;
    text-shadow: 5px 5px 5px black !important;
}

.navbar-nav li{
    margin:0;
}

.navbar-inverse .navbar-nav > li > a {
    color: black;
    padding: 13px 13px; /* 和Dropdown-btn保持一致 */
    display: block; /* 确保占满li的宽度和高度 */
}

.navbar-inverse .navbar-nav > li > a:hover, .Dropdown-btn:hover, .Dropdown-btn:focus {
    background-color: rgba(128, 128, 255,0.5) !important;
    color: white !important; /* 修正语法错误 */
}

.glyph-pad {
    left: -4px;
    top: 4px;
}

.Dropdown-btn {
    cursor: pointer;
    font-size: inherit;
    border: none;
    outline: none;
    color: black;
    font-family: inherit;
    background-color: inherit;
    padding: 13px 13px;
    margin: 0;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #00ff99;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-menu > li > a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

ul.dropdown-menu > li > a {    
    color: black !important;
}

ul.dropdown-menu > li > a:hover {
    background-color: rgba(128, 128, 255,0.5) !important;
    color: white !important;
}

.dropdown-menu > li > a:hover {
    background-color: rgba(0, 255, 153,0.8);
}

验证效果 #

修改后，所有导航项的悬停背景都会填满整个列表项区域，和Services的显示效果一致。

内容的提问来源于stack exchange，提问作者Salman Abbas