初来这里，请多多帮助我一下，如何实现以下菜单效果（最好是ＣＳＳ的），小妹感谢了。我急用［100分］

我是初网页设计的，老板要实现以下效果，请大家帮助我一下。
这是默认状态

当点击Ｍｕｓｉｃ后

由于我刚学完的，自己实现不了这个效果，问同事吧，刚来上班……，希望会的朋友帮助我一下。如果实现了，我马上给您分。我只会一点ＣＳＳ，不知道此效果用ＣＳＳ能实现不，jvascript一点也不会。希望哪帮助我实现这个效果。

分在这个帖子上，也是这个问题
http://topic.csdn.net/u/20070930/12/2aa80dc2-9238-4a6c-a712-61cb45e8726b.html --------------------编程问答-------------------- 只能告诉你用到js+Css+图片 --------------------编程问答-------------------- 还是这个版人多，请您细说说吧，谢谢　 --------------------编程问答-------------------- 26还叫小妹啊~我的天.下面这个你可以参考一下



<head> 

<title> New Document </title> 

<style> 

td        { font-family: 宋体; font-size: 9pt;} 



.ooib { border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;align:center;} 

.ooih td { border-width: 1px; padding: 0 5; } 

.ooihj { color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand} 

.ooihs { color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand} 

.ooihx { border-style: none none solid; border-color: #CC3333; } 



</style> 

<script language="JavaScript"> 

function ghbq(td) 

{ 

    var tr = td.parentElement.cells; 

    var ob = obody.rows; 

    for(var ii=0; ii<tr.length-1; ii++) 

    { 

      tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs"; 

      ob[ii].style.display = (td.cellIndex==ii)?"block":"none"; 

    } 

} 

</script> 

</head> 



<body> 



<table class="ooih" border="0" cellspacing="0" cellpadding="0" width="400" height="19"> 

    <tr> 

<td class="ooihj" nowrap onMouseOver="ghbq(this)">标签一</td> 

<td class="ooihs" nowrap onMouseOver="ghbq(this)">标签二</td> 

<td class="ooihs" nowrap onMouseOver="ghbq(this)">标签三</td> 

<td class="ooihs" nowrap onMouseOver="ghbq(this)">标签四</td> 

<td class="ooihx" width="100%"> </td> 

    </tr> 

</table> 

<table class="ooib" id="obody" border="0" cellspacing="0" cellpadding="0" width="237" height="133"> 

<tr> 

      <td> 

      <li>标签内容一 </li>

       <li>标签内容一 </li>

        <li>标签内容一 </li>

        <li>标签内容一 </li>

         <li>标签内容一 </li>

         <li>标签内容一 </li>

         <li>标签内容一 </li>

    </td> 

    </tr> 

    <tr style="display: none"> 

      <td> 

标签内容二 

      </td> 

    </tr> 

    <tr style="display: none"> 

      <td> 

标签内容三 

      </td> 

    </tr> 

    <tr style="display: none"> 

      <td height="12"> 

标签内容四      </td> 

  </tr> 

</table> 



</body> 

</html>

--------------------编程问答-------------------- 楼上的，你给的，也不是我要的效果啊，我那个是一个压在另一个上的

２６不是小妹，是啥，那你管我叫阿姨吧 --------------------编程问答-------------------- 我已经在帖子转到这个区了，为了方便给您分，请上这个百分帖子上吧，顺便说一下，我是毛２６，就是小妹
http://topic.csdn.net/u/20070930/12/2aa80dc2-9238-4a6c-a712-61cb45e8726b.html --------------------编程问答-------------------- 楼上的楼上说的对啊。 --------------------编程问答-------------------- 老小妹，你把这个效果的网址发来，抠了看看 --------------------编程问答-------------------- 用纯CSS就能实现了. --------------------编程问答--------------------
大姐姐呀，你非要你说的那种吗？

就不能变通一下吗/ --------------------编程问答-------------------- 用js可以实现，for循环一下就可以了那就是两张不同的图片切换而已!
  function showSub(t)
       {
            for(var i=1;i<=4;i++)
            {
               if(i==t)
               {
                  document.getElementById('sub'+i).style.backgroundImage='url(images/top_bg1.gif)';
                  document.getElementById('div'+i).style.display='';
                  document.getElementById('sp'+i).style.color='#ffffff';
               }
               else
               {
                  document.getElementById('sub'+i).style.backgroundImage='url(images/top_bg2.gif)';
                  document.getElementById('div'+i).style.display='none';
                  document.getElementById('sp'+i).style.color='#1D5CB1';
               }
            }
       }
就是两张图片，一张变以同时把别的图片都变了就可以了!! --------------------编程问答-------------------- mark

补充：.NET技术 ,  ASP.NET