title: CSS3 transition issue in navigation
body: <p>I would like to use pure css3 effects without using jQuery and I would like to make the tab expand smoothly using css3 transition, but there is a problem.</p>
  
  <p>If you look at the <a href="http://jsfiddle.net/ATPRu/3/" rel="nofollow">jsfiddle file</a> you will notice a problem with the overlapping and crashing of tabs .</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;nav id="mainnav"&gt;
          &lt;ol&gt;
              &lt;li class="home"&gt;&lt;a href="http://www.domain.com"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="news"&gt;&lt;a href="http://www.domain.com/p/"&gt;News&lt;/a&gt;&lt;/li&gt;
              &lt;li class="photos"&gt;&lt;a href="http://www.domain.com/channels/s/"&gt;Photos&lt;/a&gt; &lt;/li&gt;
              &lt;li class="biography"&gt;&lt;a href="http://www.domain.com/e/"&gt;Biography&lt;/a&gt;&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS code:</p>
  
  <pre><code>div#wrapper{
  width:990px;
  height:auto;
  margin:0 auto;
  
  font:15px Arial,Verdana,Helvetica,sans-serif;
  
  }
  div#wrapper #mainnav{
  width:100%;
  height:40px;
  
  border-bottom:1px solid #c4c4c4;
  float:left;
  clear:both;
  background-color: #5b5b5b;
  background-image: -moz-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f); 
  background-image: -webkit-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f); 
  background-image: -o-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
  background-image: -ms-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
  background-image: linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
  }
  
  div#wrapper #mainnav ol{
  list-style:none;
  margin:0px; padding:0;
  }
  div#wrapper #mainnav li{
  float:left;
  }
  
  div#wrapper #mainnav li.home{
  background: #6db3f2; /* Old browsers */
  background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #3690f0 56%, #1e69de 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),  color-stop(40%,#54a3ee), color-stop(56%,#3690f0), color-stop(100%,#1e69de)); /*  Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%);    /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
  
  float:left;
  width:48px;
  height:40px;
  position:relative;
  margin-top:0px ; padding:0;
  }
  div#wrapper #mainnav li.home a{
  background:url(home.png) 0px 0px no-repeat; 
  margin-left:0px;
  }
  
  
  div#wrapper #mainnav li.home:hover{
  background: #6db3f2; /* Old browsers */
  background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #3690f0 56%, #1e69de 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(40%,#54a3ee), color-stop(56%,#3690f0), color-stop(100%,#1e69de)); /*  Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
  float:left;
  width:48px;
  height:40px;
  position:relative;
  margin-top:0px ; padding:0;
  }
  div#wrapper #mainnav li.home a:hover{
  background:url(home.png) 0px 0px no-repeat; 
  margin-left:0px;
  
  }
  
  div#wrapper #mainnav li.news:hover{
  cursor:pointer;
  border:1px solid #b30808; background-color: #e40a0a;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e40a0a), color-stop(100%, #9f0202));
   background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
  background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
  background-image: -ms-linear-gradient(top, #e40a0a, #9f0202);
  background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
  background-image: linear-gradient(top, #e40a0a, #9f0202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#9f0202); 
   }
   div#wrapper #mainnav li.news a:hover{
  background:url(awatch_icon.png) 5px 6px no-repeat; 
  padding-top:9px;
  text-shadow:1px 1px 1px blue;border-left:1px solid #000;
  }
  
  div#wrapper #mainnav li.photos:hover{
  background: #6db3f2; /* Old browsers */
  background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #3690f0 56%, #1e69de 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color- stop(40%,#54a3ee), color-stop(56%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+  */
  background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
  }
  div#wrapper #mainnav li.photos a:hover{
  background:url(domain_icon.png) 5px 6px no-repeat;padding-top:10px;text-shadow:1px 1px 1px blue;}
  
  
  
  
  div#wrapper #mainnav li.biography:hover{
  background-color: #ffaf46;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf46), color-stop(100%, #e78404));
  background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
  background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
  background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
  background-image: -o-linear-gradient(top, #ffaf46, #e78404);
  background-image: linear-gradient(top, #ffaf46, #e78404);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffaf46, endColorstr=#e78404);
  }
  div#wrapper #mainnav li.biography a:hover{
   background:url(icon.png) 5px 6px no-repeat;padding-top:10px;text-shadow:1px 1px 1px blue;}
  
  
  
  div#wrapper #mainnav li{background:url(mainnav_sep.jpg) no-repeat left top;float:left;}
  div#wrapper #mainnav li a{display:block;padding-top:11px;color:#fff;margin:0  10px;cursor:pointer;height:27px;text-shadow:1px 1px 1px #000;}
  div#wrapper #mainnav li a:link, div#wrapper #mainnav li a:visited{text-decoration:none;}
  div#wrapper #mainnav li a:hover,div#wrapper #mainnav li a:active, div#wrapper #mainnav li a:focus {
  transition:width 2s;
  -moz-transition:width 2s; /* Firefox 4 */
  -webkit-transition:width 2s; /* Safari and Chrome */
  -o-transition:width 2s; /* Opera */
  width:120px;height:29px;margin:0px 0px 0px 0px ;text-indent:35px;text- decoration:none;color:#fff;text-shadow:1px 1px 1px #000;}
  </code></pre>