CSS Navigation Bar Active Link - html

Question

I'm creating a website, and currently I am having issues with my navigation bar. The issue I am having is with the active link. The background won't fit to the size of the initial button like I want it to. The background is just highlighting the text basically.
<div class="nav">
<ul>
<li>Home</li>
<li><a class="active" href="cage-habitat.html">Cage & Habitat</a>
<ul>
<li>Litter Training</li>
</ul>
</li>
<li>Food & Treats</li>
<li>Dust Bath & Care</li>
<li>Safe Toys</li>
<li>Chinquiry</li>
</ul>
</div>
.nav {
background-color: #526655;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.nav ul li {
color: #fff;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #526655;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #94b399;
color: #fff;
}
/* drop down styles */
.nav ul li ul {
padding: 0;
position: absolute;
top: 42px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.nav ul li ul li {
background: #94b399;
display: block;
color: #fff;
}
.nav ul li ul li:hover {
background: #94b399;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
/* end dropdown styles */
.active {
background: #94b399;
}
Any help would be appreciated. https://jsfiddle.net/cweav3r/7j25e8jh/

Answer 1

<ul><li><a href="litter-train-chinchilla.html">Litter
Training</a></li></ul> is taking extra space .
DEMO : http://jsfiddle.net/b89kds70/10/
<div class="nav">
<ul>
<li>Home</li>
<li><a class="active" href="cage-habitat.html">Cage & Habitat</a>
</li>
<li>Food & Treats</li>
<li>Dust Bath & Care</li>
<li>Safe Toys</li>
<li>Chinquiry</li>
</ul>
</div>
.nav {
background-color: #526655;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
position:relative;
}
.nav ul li {
color: #fff;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #526655;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #94b399;
color: #fff;
}
/* drop down styles */
.nav ul li ul {
padding: 0;
position: relative;
top: 42px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.nav ul li ul li {
background: #94b399;
display: inline;
color: #fff;
}
.nav ul li ul li:hover {
background: #94b399;
}
.nav ul li:hover ul {
position:absolute;
display: block;
opacity: 1;
visibility: visible;
}
/* end dropdown styles */