Why has my .tabs li:hover property stopped working? - html

Question

My page no longer applies the :hover effect to my .tabs li element, but I can't for the life of me figure out why. I commented out my jQuery script and it still won't work.
Here's a JSFiddle: https://jsfiddle.net/qpmg4wzq/
<div id="tabs-container">
<ul class="tabs">
<li class="tab current" data-tab="tab-1">tab 1</li>
<li class="tab" data-tab="tab-2">tab 2</li>
<li class="tab" data-tab="tab-3">tab 3</li>
<li class="tab" data-tab="tab-4">tab 4</li>
</ul>
</div>
#tabs-container {
float: left;
width: 100%;
overflow: hidden;
}
.tabs {
padding: 0px;
list-style: none;
clear: left;
float: left;
left: 50%;
}
.tabs li {
display: block;
float: left;
right: 50%;
margin: 0;
padding: 10px 20px 5px 20px;
cursor: pointer;
font-size: 1.1em;
line-height: 2em;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.tabs li:hover {
background: #88abc2!important;
}
.tabs li.current {
background: #d0e0eb;
color: #49708a;
}
.tab-content {
display: none;
padding: 15px;
line-height: 1.4;
}
.tab-content.current {
display: inherit;
}
Thanks.

Answer 1

Your .tab-content is overlapping the .tabs-container so any :hover action you make is actually registering as a hover on the .tab-content element.
A couple of options to solve this
Move the tab-content down using margin-top
.tab-content.current {
display: inherit;
margin-top: 60px;
}
Remove float: left from #tabs-container