title: This code won't work// How to get the div to slide in-line with other divs on mouse over?
body: <p>I am aware there are discussions similar and I have read them, analysed them and tried them in my code. The code below is what I currently have, trust me, I have spent all day exhausting all methods to prevent me from asking here but I give up! This is by far the most frustrating goal.</p>
  
  <p>I would like to have a header with a little bar that slides across above each menu item on hover over. A perfect example of what I would like is located here at <a href="http://www.wix.com/" rel="nofollow">http://www.wix.com/</a> . Please visit and move your mouse over the navigation bar and you'll understand instatly what I am trying to achieve.</p>
  
  <p>Here is my current code...</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  div {
      display: inline-block;
      float:left;
  }
  #red {
      background-color:#FF0000;
      height:100px;
      width:100px;
  }
  
  #blue {
      background-color:#0000FF;
      height:100px;
      width:200px;
  }
  
  #yellow {
      background-color:#E2BE22;
      height:100px;
      width:50px;
  }
  
  #green {
      background-color:#008800;
      height:100px;
      width:170px;
  }
  #slider{
      background-color:#6FF;
      height:10px;
      width:100px;
      position:relative;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="slider"&gt;&lt;/div&gt;&lt;br /&gt;
          &lt;div id="red"&gt;&lt;/div&gt;
          &lt;div id="blue" onmouseover="javascript:movetoblue()" onmouseout="javascript:exitblue()"&gt;&lt;/div&gt;
          &lt;div id="yellow" onmouseover="javascript:movetoyellow()" onmouseout="javascript:exityellow()"&gt;&lt;/div&gt;
          &lt;div id="green" onmouseover="javascript:movetogreen()" onmouseout="javascript:exitgreen()"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script&gt;
  var slider = document.getElementById( 'slider' );
  
  function movetoblue(){
          var slider = $("#slider");  
          slider.animate({left: '100px', width: '160px'}, "slow");
  }
  function exitblue(){
          var slider = $("#slider");  
          slider.animate({left: '7px', width: '200px'}, "slow");
  }
  function movetoyellow(){
          var slider = $("#slider");  
          slider.animate({left: '100px', width: '160px'}, "slow");
  }
  function exityellow(){
          var slider = $("#slider");  
          slider.animate({left: '7px', width: '200px'}, "slow");
  }
  function movetogreen(){
          var slider = $("#slider");  
          slider.animate({left: '100px', width: '160px'}, "slow");
  }
  function exitgreen(){
          var slider = $("#slider");  
          slider.animate({left: '7px', width: '200px'}, "slow");
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I know much is probably wrong with it. Sigh. But any help would be much appreciated. Thank you :)</p>
  
  <p>PS: I would like this to work on Chrome, IE, Safari and Firefox, but I'm mainly concerned about Chrome, IE, Safari. Thanks again!</p>