CSS 导航栏活动链接

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 {
	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; 
    }

任何帮助将不胜感激。 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 */