Jquery + CSS create flow navigation menu fluid navigation

So how should we implement the flow navigation menu?
I,

Move the mouse over menu, that is, the show prompt information.
II. Implementation steps
1. CSS Code Copy code The Code is as follows: menubarholder {width: 730px; Height: 45px; Background-color: #000; color: # FFF; font-family: Arial; font-size: 14px; margin-top: 20px ;}
# Menubarholder ul {list-style-type: none; display: block ;}
# Container {margin-top: 100px ;}
# Menubar Li {float: Left; padding: 15px; Height: 16px; width: 50px; border-Right: 1px solid # CCC ;}
# Menubar Li a {color: # FFF; text-Decoration: none; letter-Spacing:-1px; font-weight: bold ;}
. Menuhover {background-color: #999 ;}
. Firstchild {border-left: 1px solid # CCC ;}
. Menuinfo {cursor: hand; Background-color: #000; color: # FFF;
Width: 74px; font-size: 11px; Height: 100px; padding: 3px; display: none;
Position: absolute; margin-left:-15px; margin-top:-15px;
-Moz-border-radius-bottomright: 5px;
-Moz-border-radius-bottomleft: 5px;
-WebKit-border-bottom-left-radius: 5px;
-WebKit-border-bottom-right-radius: 5px;
-Khtml-border-radius-bottomright: 5px;
-Khtml-border-radius-bottomleft: 5px;
Border-radius-bottomright: 5px;
Border-radius-bottomleft: 5px;
}

Menubarholder: Fixed container of menu, width = 730px.
Menuinfo: displays the prompt information.
2. HTML code Copy code The Code is as follows: <Div id = "menubarholder">
<Ul id = "menubar">
<Li class = "firstchild"> <a href = "javascript: #"> Home </a>
<Div class = "menuinfo"> I am some text about the home section </div> </LI>
<Li> <a href = "javascript: #"> services </a>
<Div class = "menuinfo"> I am some text about the Services Section </div> </LI>
<Li> <a href = "javascript: #"> clients </a>
<Div class = "menuinfo"> I am some text about the clients section </div> </LI>
<Li> <a href = "javascript: #"> portfolio </a>
<Div class = "menuinfo"> I am some text about the portfolio section </div> </LI>
<Li> <a href = "javascript: #"> about </a>
<Div class = "menuinfo"> I am some text about the about section </div> </LI>
<Li> <a href = "javascript: #"> blog </a>
<Div class = "menuinfo"> I am some text about the blog section </div> </LI>
<Li> <a href = "javascript: #"> follow </a>
<Div class = "menuinfo"> I am some text about the follow section </div> </LI>
<Li> <a href = "javascript: #"> contact </a>
<Div class = "menuinfo"> I am some text about the contact section </div> </LI>
</Ul>
</Div>

Ui Li element: list element.
Div element: the prompt content.
3. JavaScript codeCopy codeThe Code is as follows: $ (document). Ready (function ()
{
$ ('# Menubar li'). Click (function ()
{
VaR url = $ (this). Find ('A'). ATTR ('href ');
Document. Location. href = URL;
});
$ ('# Menubar li'). Hover (function ()
{
$ (This). Find ('. menuinfo'). slidedown ();
},
Function ()
{
$ (This). Find ('. menuinfo'). slideup ();
});
});

Click () and hover (): bind a click event and a mouse over event to the Li element.
Find () function: searches for all elements that match the specified expression. This function is a good way to find the child element of the element being processed.
Slidedown (speed, [callback]): dynamically displays all matching elements by increasing the height (down). After the display is complete, a callback function is triggered.
Slideup (speed, [callback]): dynamically hides all matching elements by changing the height (decreasing upwards). After hiding, a callback function is triggered.<Br/> <style type = "text/CSS"> # menubarholder {width: 730px; Height: 45px; Background-color: #000; color: # FFF; font-family: Arial; font-size: 14px; margin-top: 20px; }# menubarholder ul {list-style-type: none; display: block ;}. firstchild {border-left: 1px solid # CCC ;}# container {margin-top: 100px ;}# menubar Li {float: Left; padding: 15px; Height: 16px; width: 50px; border-Right: 1px solid # CCC ;}# menubar Li A {color: # FFF; text-Decoration: none; letter-Spacing:-1px; font-weight: bold ;}. menuhover {background-color: #999 ;}. menuinfo {cursor: hand; Background-color: #000; color: # FFF; width: 74px; font-size: 11px; Height: 100px; padding: 3px; display: none; position: absolute; margin-left:-15px; margin-top:-15px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; -WebKit-border-bottom-left-Rad IUS: 5px;-WebKit-border-bottom-right-radius: 5px;-khtml-border-radius-bottomright: 5px;-khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px; border-radius-bottomleft: 5px;} H1 {Font: 50px normal Georgia, 'times new Roman ', times, Serif; color: #111; margin: 0; text-align: center; padding: 5px 0; </P> <p >}h1 small {Font: 0.2em normal verdana, Arial, Helvetica, sans-serif; text-T Ransform: uppercase; letter-Spacing: 1.4em; display: block; color: # CCC ;}</style> <p> <! -- [If IE]> </P> <style type = "text/CSS"> # menubar Li a {width: 50px ;}. menuinfo {margin-left:-65px; width: 80px ;}</style> <p> <! [Endif] --> <center> </P> fluid navigation <br/> CSS & jquery <small> tutorial by Addy Osmani </small> <ul id = "menubar"> <li class = "firstchild"> homei am some text about the home section </LI> <li> servicesi am some text about the Services Section </LI> <li> clientsi AM some text about the clients section </LI> <li> portfolioi am some text about the portfolio section </LI> <li> abouti am some text about the about section </LI> <li> blogi am some text about the blog section </LI> <li> followi am some text about the follow section </LI> <li> contacti am some text about the contact section </LI> </ul> <p> </center> <br/>