title: jQuery sliding border bottom for horizontal navigation bar / menu
body: <p>I had an idea for a horizontal navigation bar that the page you were on would have an underline or bottom border that when you went to a &lt; li > in the menu that underline / bottom border would, at about a medium speed, move to the &lt; li > your mouse is hovering over. Any help would be <b>greatly</b> appreciated.</p>
  
  <p>Sorry for not providing sample code. I just have no idea where to start</p>
  
  <p>Here's the menu, just for some example:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  ul
  {
  list-style-type:none;
  margin:0;
  padding:0;
  }
  li
  {
  display:inline;
  }
  li.active
  {
  border-bottom: 2px solid red;
  }
  a
  {
  text-decoration:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;ul&gt;
  &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>