title: JQuery animated nav
body: <p>I am currently working on an animated nav and I've come to a snag. I trying to make a nav that looks like the images below:
  <img src="https://i.stack.imgur.com/yGZ3G.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/WRpmM.png" alt="enter image description here"></p>
  
  <p>I can't quite seem to get all the elements to line up correct and change color all at the same time on hover. With my JQuery I can only get the tabs to animate down not up can someone help?</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 content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
  &lt;title&gt;untitled&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  .nav{
  margin: 3px 3px 0 0;
  width: 103px;
  position: relative;
  min-height: 200px;
  float:left;
  bottom:-20px;
  }
  h2{
  color:#ddd;
  text-shadow:black 2px 2px 3px;
  }
  .subnav{
  color:white;
  float:bottom;
  position:absolute
  height:25px;
  min-height:10px;
  width:100px;
  background: #ddd;
  border: 2px solid;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  z-index:100;
  box-shadow: 10px 10px 5px black;
  }
  .subnav:hover a:hover .h2:hover{
  background-color:black;
  }
  
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="#" id="aboutlink"&gt;
  &lt;div class="nav" id="about"&gt;
  &lt;center&gt;&lt;h2&gt;About&lt;/h2&gt;&lt;/center&gt;
  &lt;div  class="subnav" id="subabout"&gt;
  &lt;p id="subtxt"&gt; Learn about&lt;br/&gt; us and our&lt;br/&gt; services  &lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  
  &lt;a href="#" id="worklink"&gt;
  &lt;div class="nav" id="work"&gt;
  &lt;center&gt;&lt;h2&gt;Work&lt;/h2&gt;&lt;/center&gt;
  &lt;div  class="subnav" id="subwork"&gt;
  &lt;p id="worktxt"&gt; See our&lt;br/&gt; work and&lt;br /&gt; portfolio &lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  
  &lt;a href="#" id="helplink"&gt;
  &lt;div class="nav" id="help"&gt;
  &lt;center&gt;&lt;h2&gt;Help&lt;/h2&gt;&lt;/center&gt;
  &lt;div  class="subnav" id="subhelp"&gt;
  &lt;p id="helptxt"&gt; Talk to&lt;br/&gt; our support  &lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  
  &lt;a href="#" id="searchlink"&gt;
  &lt;div class="nav" id="search"&gt;
  &lt;center&gt;&lt;h2&gt;Search&lt;/h2&gt;&lt;/center&gt;
  &lt;div  class="subnav" id="subsearch"&gt;
  &lt;p id="searchtxt"&gt;  Search our&lt;br /&gt; site  &lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  
  
  
  
  
  &lt;script type="text/javascript"src="jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function()
  {
      $('#subtxt').hide();
      $('#worktxt').hide();
      $('#helptxt').hide();
      $('#searchtxt').hide();
      });
  
      $("#aboutlink").hover(function(){
      $("#subabout").animate({ "height": "80px"}, "slow");
      $("#subtxt").show();
      },
      function(){
      $("#subabout").animate({ "height": "10px"}, "slow");
      $("#subtxt").hide();
      });
  
          $("#worklink").hover(function(){
      $("#subwork").animate({ "height": "80px"}, "slow");
      $("#worktxt").show();
      },
      function(){
      $("#subwork").animate({ "height": "10px"}, "slow");
      $("#worktxt").hide();
      });
  
          $("#helplink").hover(function(){
      $("#subhelp").animate({ "height": "80px"}, "slow");
      $("#helptxt").show();
      },
      function(){
      $("#subhelp").animate({ "height": "10px"}, "slow");
      $("#helptxt").hide();
      });
  
          $("#searchlink").hover(function(){
      $("#subsearch").animate({ "height": "80px"}, "slow");
      $("#searchtxt").show();
      },
      function(){
      $("#subsearch").animate({ "height": "10px"}, "slow");
      $("#searchtxt").hide();
      });
  
  
  
  
  
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>I apologize for the messy coding and appreciate any help.</p>