Despite my extensive search on SO, none of the answers I found seem to address my specific situation.
In a col-md-2 section where I have a navigation bar, I am trying to change the background color to extend up to the border when hovering. While I can change the color, it doesn't quite reach the border as desired.
I've put together a sample fiddle to demonstrate this issue.
If the fiddle is not accessible, here's the code snippet:
<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>
CSS Styles:
.col-md-2{
background-color:red;
}
.col-md-2>ul>li>a:hover{
background-color:yellow;
}
Update:
I realized that adding display:block in the a tag may solve the issue. However, implementing this solution in my code didn't work as expected. Here is the CSS I am currently using:
.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 Snippet:
<div class="col-md-2">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("View System Families", "Index", "LsystemFamilies")</li>
<li>@Html.ActionLink("Add New System Family", "Create", "Lsystemfamilies")</li>
<li>@Html.ActionLink("View all Systems", "Index", "Lsystems")</li>
</ul>
</div>