title: JQuery SlideToggle Width Expanding
body: <p>Hey guys,</p>
  
  <p>I have a glitch in my JQuery. When I hover over each tab area and move horizontally .panel seems to lose its width attribute and either expand or shrink when it slides toggles up. Any ideas?</p>
  
  <p><a href="http://jsfiddle.net/jfarr07/5nEXB/" rel="nofollow">http://jsfiddle.net/jfarr07/5nEXB/</a></p>
  
  <p>JQuery  </p>
  
  <pre><code>&lt;script&gt;
  $(function()
  {
      $("li.nav").hover(function()
      {
          var x = $(this).offset().left;
          var y = $(this).offset().top;
          //var w = $(this).width();
          var totalWidth = $(this).width();
          totalWidth += parseInt($(this).css("padding-left"), 10) + parseInt($(this).css("padding-right"), 10); //Total Padding Width
          totalWidth += parseInt($(this).css("margin-left"), 10) + parseInt($(this).css("margin-right"), 10); //Total Margin Width
          totalWidth += parseInt($(this).css("borderLeftWidth"), 10) + parseInt($(this).css("borderRightWidth"), 10); //Total Border Width
          var h = $(this).height();
  
          //$("#navigation").find(".panel").stop().slideToggle("fast");
          $("#navigation").find(".panel").animate({
              top: y,
              left : x
          }, 0 ).css({'width' : totalWidth,
              '40px' : h,
              'position' : 'absolute'}).slideDown(200).css('display','block');
  
      }, function() {
          $("#navigation").find(".panel").stop().slideUp("fast");
      });
  });
  </code></pre>
  
  <p>
  CSS</p>
  
  <pre><code>body, html {
  padding:0;
  margin:0;
  background:url(../../Portfolio/images/wood2.png);
  }
  
  a:link {
  text-decoration:none;
  color:#000;
  font-family:open-sans, HelveticaNeue, Helvetica Neue Condensed Bold, Helvetica Neue, serif;
  -webkit-transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -ms-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
  transition:all 0.4s ease;
  }
  
  a:visited {
  color:#000;
  }
  
  a:hover {
  color:#FFF;
      -webkit-transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -ms-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
  transition:all 0.4s ease;
  }
  
  #navigation {
  width:auto;
  height:40px;
  background:rgba(255, 255, 255, .45);
  min-width:700px;
  }
  
  ul#nav {
  display:inline;
  list-style-type:none;
  overflow:auto;
  padding:0;
  margin:0;
  }
  
  li.nav {
  display:inline-block;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  position:relative;
  height:30px;
  float:left;
  border-bottom:none;
  }
  
  ul li.nav a {
  display:block;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:30px;
  padding-right:30px;
  }
  
  * html ul li a {
  width: 1%;
  }
  
  .panel {
  position:absolute;
  background:#363;
  background-size:100%;
  height:40px;
  display:none;
  width:100%;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;div class="panel"&gt;&lt;/div&gt;
      &lt;ul id="nav"&gt;
          &lt;li class="nav"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a href="#"&gt;OUR STORY&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a href="#"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a href="#"&gt;GIFT REGISTRY&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>