CSS Navigation Bar Active Link

Question

Я создаю веб-сайт, и в настоящее время у меня проблемы с моей панелью навигации. У меня проблема с активной ссылкой. Фон не будет соответствовать размеру начальной кнопки, как я этого хочу. Фон просто выделяет текст в основном.

<div class="nav"> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a class="active" href="cage-habitat.html">Cage &amp; Habitat</a> 
     <ul> 
     <li><a href="litter-train-chinchilla.html">Litter Training</a></li> 
     </ul> 
    </li> 
    <li><a href="food-treats.html">Food &amp; Treats</a></li> 
    <li><a href="dust-bath.html">Dust Bath &amp; Care</a></li> 
    <li><a href="toys.html">Safe Toys</a></li> 
    <li><a href="contact.html">Chinquiry</a></li> 
    </ul> 
</div> 

.nav { 
 
\t background-color: #526655; 
 
    } 
 

 
    .nav a { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
    } 
 

 
    .nav ul { 
 
    \t text-align: left; 
 
    \t display: inline; 
 
    \t margin: 0; 
 
    \t padding: 15px 4px 17px 0; 
 
    \t list-style: none; 
 
    } 
 
    .nav ul li { 
 
    \t color: #fff; 
 
    \t display: inline-block; 
 
    \t margin-right: -4px; 
 
    \t position: relative; 
 
    \t padding: 15px 20px; 
 
    \t background: #526655; 
 
    \t cursor: pointer; 
 
    \t -webkit-transition: all 0.2s; 
 
    \t -moz-transition: all 0.2s; 
 
    \t -ms-transition: all 0.2s; 
 
    \t -o-transition: all 0.2s; 
 
    \t transition: all 0.2s; 
 
    } 
 
    .nav ul li:hover { 
 
\t background: #94b399; 
 
    \t color: #fff; 
 
} 
 
\t /* drop down styles */ 
 
\t .nav ul li ul { 
 
\t \t padding: 0; 
 
\t \t position: absolute; 
 
\t \t top: 42px; 
 
\t \t left: 0; 
 
\t \t width: 150px; 
 
\t \t -webkit-box-shadow: none; 
 
\t \t -moz-box-shadow: none; 
 
\t \t box-shadow: none; 
 
\t \t display: none; 
 
\t \t opacity: 0; 
 
\t \t visibility: hidden; 
 
\t \t -webkit-transiton: opacity 0.2s; 
 
\t \t -moz-transition: opacity 0.2s; 
 
\t \t -ms-transition: opacity 0.2s; 
 
\t \t -o-transition: opacity 0.2s; 
 
\t \t -transition: opacity 0.2s; 
 
\t } 
 
\t .nav ul li ul li { 
 
\t \t background: #94b399; 
 
\t \t display: block; 
 
\t \t color: #fff; 
 
\t } 
 
\t .nav ul li ul li:hover { 
 
\t \t background: #94b399; 
 
\t } 
 
\t .nav ul li:hover ul { 
 
\t \t display: block; 
 
\t \t opacity: 1; 
 
\t \t visibility: visible; 
 
\t } 
 
\t /* end dropdown styles */ 
 
    .active { 
 
\t background: #94b399; 
 
    }

Любая помощь будет оценена. 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><a href="index.html">Home</a></li> 
       <li><a class="active" href="cage-habitat.html">Cage &amp; Habitat</a> 
       </li> 
       <li><a href="food-treats.html">Food &amp; Treats</a></li> 
       <li><a href="dust-bath.html">Dust Bath &amp; Care</a></li> 
       <li><a href="toys.html">Safe Toys</a></li> 
       <li><a href="contact.html">Chinquiry</a></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 */