Well I can't give you an exact example as to what you want.
Basically, the effect on the menu is CSS.
A simple one would be like
Code:
a.menu {
background-color: green; /* its not exactly green, just as a sample i'll put that */
border-style: solid;
border-width: 1px;
border-color: gray;
}
a.menu:hover {
border-width: 0px;
border-bottom-width: 2px;
border-color: green;
background-color: white;
}
and just set the class="menu" on the links. Like <a href="" class="menu">text</a>.
As far as the second row comes about, I can't tell you exactly how to make it right now. I tried looking for a tutorial but you could probably find something with more time. Basically they use the visibility attribute in CSS. Using Javascript they change the visibility for that row
So like if you make the menu row, just put a div tag like <div id="second_row" style="visibility: hidden;">Second Row</div>
And on the link for the second row do, <a href="" class="menu" onclick="second_row.visibility='visible'"> (the visibility might be true instead of visible, i don't remember)
Hope this helps, if not, I'm sure you can find plenty of tutorials online 
|