GOOGLE

                                                                      As you already have seen top navigation menu in google,so I decided to write my post on this beautiful feature of google.This navigation is quite attractive.Well,it is having a nice white grayed image in background with cool blue hover effect.

                          So, before getting into code or live example, lets see what we are going to design:

STEP-1 :

CSS coding

/* Main navigation wraper */
#navwrap{margin:0 auto; padding:0;  background:url(nav_bg_sprite.png) top #ffffff repeat-x; background-position:0px -40px; height:20px; padding:5px 10px; border-top:2px solid #BAD3EA; }

/*Navigation menu*/
#nav{font-size:13px; padding-top:2px;}

#nav a{padding:7px 10px 7px 10px; color:#7FB6E6; text-decoration:none; }
#nav a:hover{padding:7px 10px 7px 10px; color:#666; background:url(nav_bg_sprite.png) repeat-x; background-position:0px -70px; text-decoration:none; border-top:2px solid #1A54E1;}

/*For selected item*/
#nav a.current{padding:7px 10px 7px 10px; color:#333; font-weight:bold; background:url(nav_bg_sprite.png) repeat-x; background-position:0px -70px; text-decoration:none; border-top:2px solid #1A54E1;}

/*options menu itemm with icon*/
.optionsmenu{ background:url(nav_bg_sprite.png) no-repeat; background-position:0px 0px; padding:0 5px 0 10px;}

.floatleft{float:left;} /* for the left navigation menu */
.floatright{float:right} /* for the right options navigation menu */
.clear{clear:both;} /* clear all floating, left and right */

STEP-2:

HTML CODING


<div id="navwrap">
<div id="nav" class="floatleft">
<a class="current" href="#">Web</a>
<a href="#">Images</a>
<a href="#">Video</a>
<a href="#">Maps</a>
<a href="#">News</a>

  </div>

<div id="nav" class="floatright">
<a href="#">Login</a>
  <a href="#"><span class="optionsmenu">Option </span></a>
</div>

<div class="clear"></div>

</div>

Now copy these into your notepad and surely you will get navigation menu like google.

After copying it,you will get as:

Web Images Video Maps News

Login option 

For alternative example,click on the following link:

DEMO

If any problem persist,then email me or comment......