Hi, i'm new here, some friends told this site has a lot of expert, so i'm here to ask how this page did the navigation bar with the dynamic hover? I'm just trying to learn how it works, not the exact design.

The only thing i could do was a static one (just like the "Home" in that page) with this code

CSS
#nav {
width: 960px;
height: 65px;
margin: 0 auto;
padding-top: 10px;
position:relative;
overflow:hidden;
background: url(nav.png) no-repeat; /* the navegation bar*/
}

#nav ul {
  clear: left;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
  position: relative;
  left: 50%;
  text-align: center;

}

#nav li {
  display:block;
  float:left;
  list-style:none;
  font-style: normal;	
  margin:0;
  padding:0;
  position:relative;
  right:50%;
  background: url(nav-divider.gif) no-repeat 0% 14px;
}

#nav li.first a {
background: url(nav-left.png) left top no-repeat;
height: 44px;
margin:0;
padding: 12px 10px 13px 15px;
text-decoration: none
}

#nav li.first a span {
background: url(nav-right.png) right top no-repeat;
font-style: normal;
padding: 12px 15px 13px 0;
}

#nav li.first a span2 {
background: #d23e2c;
height: 44px;
padding: 12px 0 13px 0;
font-style: normal;	
}

#nav li a {
text-decoration: none;
font-family: 'Oswald', sans-serif;
padding:3px 10px;
font-size: 17px;
line-height: 44px;
font-weight: bold;
color: #FFFFFF;
font-style: normal;	
text-transform: uppercase;
}

HTML
<div id="nav">
<ul>
<li class="first"><a href="index.php" title=""><span><span2>Menu</span2></span></a></li>
<li>...</li>
</ul>
</div>

But when i use the same code to hover, it doesn't work well: if you point the cursor in the left of an menu item, it shows only nav-left.png and nav-right.png (leaving the middle in blank), only if you point the cursor in the center, you can see the complete hover.

Hope someone knows what i'm trying to explain because for me is very difficult to explain. Thanks for your time

Google cssplay menus because it's much better to choose on which works and then edit it.