Html 扩展悬停时的背景色

我在SO中搜索了很多问题，但没有一个答案适合我的情况

我有一个

col-md-2

，其中有一个导航条。我想在悬停时填充背景色，直到“col-md-2”的边框。我可以改变颜色，但它不会延伸到边界

我已经创建了一个示例

以防万一小提琴坏了

<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>
<div class="col-md-10">
    cycdc
</div>

更新

我知道我必须在

a标记中添加
display:block
。但是当我在我的代码中应用同样的方法时，它并没有真正起作用。我将发布我正在使用的css

.col-md-2 .navbar-nav{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav >li{
    text-align: center;   
    display:block;
}
.col-md-2 .navbar-nav>ul>li>a{
    color:#255C89;
    display:block;
}
.col-md-2 .navbar-nav >li>a:hover{
    background-color:#255C89;
    color:white;
}

Html



@ActionLink（“查看系统族”、“索引”、“LsystemFamilies”）
@ActionLink（“添加新系统族”、“创建”、“Lsystemfamilies”）
@ActionLink（“查看所有系统”、“索引”、“Lsystems”）


只需将
display:block
添加到
a
标记中即可

upd:

.col-md-2 .navbar-nav
{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav>li
{
    text-align: center;   
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a
{
    color:#255C89;
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a:hover
{
    background-color:#255C89;
    color:white;
}

根据您的代码，选择器是

.col-md-2 .navbar-nav > li > a
{
    display: block
}

upd2:

.col-md-2 .navbar-nav
{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav>li
{
    text-align: center;   
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a
{
    color:#255C89;
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a:hover
{
    background-color:#255C89;
    color:white;
}

这也会起作用
.col-md-2{
背景色：红色；
}
.col-md-2>ul>li:悬停{
背景颜色：黄色；
}






cycdc
添加
显示：块添加到
a
的另一个好处是可以在悬停时单击整个区域，这将实现您的目标：

.col-md-2{
    background-color:red;
}
.col-md-2>ul>li>a{
    display:block;
}
.col-md-2>ul>li>a:hover{
    background-color:yellow;
}

您可以通过两种方式完成此操作：

第一：
将鼠标悬停在
li
上，而不是
a


.col-md-2{
背景色：红色；
}
.col-md-2>ul>li:悬停{
背景颜色：黄色；
}






不清楚什么是“直到边界”。试着让
：将
悬停在
li
上，而不是
a
-它可能是引导中的
.col md-*
，或者只是重合？它是引导中的。。这就是你想要的？同意@IgalS的说法，不清楚你想要实现什么。如果您只想让背景色一直延伸到红色区域的右边缘，那么只需添加
display:block到
a
。请澄清你想做什么。我知道它在小提琴上起作用。但不幸的是，它对我的真实代码不起作用。请尝试display:block！我认为这和我的问题完全一样。我应该清除缓存还是做一些其他的事情来让这些东西工作？我可以通过
取消选择属性
navbar nav>li float:left`来让它工作。如何在我的代码中实现同样的效果。add float:none to element我两个都试过了。它在小提琴上起作用。但不是我的代码。用我的代码更新问题它不起作用，因为我在问题中发布了相同的代码。我不得不在
li
中禁用float，默认设置为左侧。感谢您的回答，请查看更新的问题
.col-md-2{
    background-color:red;
}
.col-md-2>ul>li>a{
    display:block;
}
.col-md-2>ul>li>a:hover{
    background-color:yellow;
}