Question

how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?

Answer 1

Each link (#nav li a) contains the nav item text plus an additional span which is set to “display:none” by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).

On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.

HTML

<ul id="nav">
  <li><a href="index.html">Home <span></span></a></li>
  <li><a href="about.html">About <span></span></a></li>
  <li><a href="jobs.html">Jobs <span></span></a></li>
</ul>

CSS:

#nav li a span{display:none}
#nav li a:hover span{display:block}

This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.