初学css+js导航条问题

问题如下：
<ul>
<li>这是显示的（首页1）</li>
<li>这是隐藏的（服务2）</li>
<li>这是隐藏的（下载3）</li>
<li>这是隐藏的（新闻4）</li>
</ul>
------------------------------------------------------------
当鼠标放在1上，
然后显示2，再显示3，再西显示4.而不是鼠标放在1上，2，3，4全部显示了。
我在baidu，和 google上找不到相关例子，因为上面全部都是，当鼠标放在1上2，3，4全部显示了。
可能我的表达能力不太好，给大家一个例子网站，效果跟www.huawei.com.cn上面导航条的效果一样。
谢谢大家帮忙了，最好有个例子代码，代码能有注释的我想好好学习一下。
劳驾各位大侠了，帮帮偶这个笨笨的初学者。