SOURCE

function g(o){return document.getElementById(o);}
function hoverli(n){
for(var i=1;i<=11;i++){g('tb_'+i).className='aa';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='list2';g('tb_'+n).className='bb';
}
function fun(){
hoverli(3);
}
function hoverli2(n){
for(var i=1;i<=11;i++){g('js_'+i).className='aa';g('jsc_0'+i).className='undis';}g('jsc_0'+n).className='list2';g('js_'+n).className='bb';
}
function fun2(){
hoverli2(3);
}
function hoverli3(n){
for(var i=1;i<=11;i++){g('be_'+i).className='aa';g('bec_0'+i).className='undis';}g('bec_0'+n).className='list2';g('be_'+n).className='bb';
}
function fun3(){
hoverli2(3);
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>

<div style="width:600px">
 <div class="lfloat" style="width:126px">
 <ul id="nav">
 <li class="aa" id="tb_1" onClick="x:hoverli(1);">网页1</li>
 <li class="bb" id="tb_2" onClick="i:hoverli(2);">网页1</li>
 <li class="aa" id="tb_3" onClick="x:hoverli(3);">网页1</li>
 <li class="aa" id="tb_4" onClick="x:hoverli(4);">网页1</li>
 <li class="aa" id="tb_5" onClick="x:hoverli(5);">网页特效</li>
 <li class="aa" id="tb_6" onClick="x:hoverli(6);">导航菜单</li>
 <li class="aa" id="tb_7" onClick="x:hoverli(7);">留言本</li>
 <li class="aa" id="tb_8" onClick="x:hoverli(8);">网页1</li>
 <li class="aa" id="tb_9" onClick="x:hoverli(9);">网页1</li>
 <li class="aa" id="tb_10" onClick="x:hoverli(10);">网页1</li>
 <li class="aa" id="tb_11" onClick="x:hoverli(11);">网页1</li>
 </ul>
 </div>
 <div class="lfloat" style="width:450px;">
  <div id="newinfo">
     <div class="ctt list2">
    <div class="dis" id="tbc_01">
     欢迎来到
    </div>
    <div class="undis" id="tbc_02">
     记住我们
    </div>
    <div class="undis" id="tbc_03">
     <a href="<#ZC_BLOG_HOST#>">百度</a>
    </div>
    <div class="undis" id="tbc_04">
     欢迎
    </div>
    <div class="undis" id="tbc_05">
     欢迎
    </div>
    <div class="undis" id="tbc_06">
     欢迎
    </div>
    <div class="undis" id="tbc_07">
     欢迎
    </div>
    <div class="undis" id="tbc_08">
     欢迎
    </div>
    <div class="undis" id="tbc_09">
     欢迎
    </div>
    <div class="undis" id="tbc_010">
     欢迎
    </div>
    <div class="undis" id="tbc_011">
      欢迎
    </div>
   </div>
    </div>
 </div>
</div>

* {
  font-size: 13px;
  font-family: Arial;
}

#nav li {
  list-style: none;
  width: 120px;
  margin-top: 0;
  padding: 4px 6px;
}

#nav li a {
  text-decoration: none;
  color: #666;
}

#nav li a:hover {
  color: #000;
}

.aa {
  border-top: 3px solid #AAC7E9;
  border-right: 1px solid #AAC7E9;
  border-bottom: 1px solid #AAC7E9;
  background: #E8F5FE;
  border-left: 1px solid #AAC7E9;
  cursor: hand;
}

.bb {
  border-top: 3px solid #ff9900;
  border-right: 1px solid #AAC7E9;
  border-bottom: 1px solid #AAC7E9;
  border-left: 1px solid #AAC7E9;
  background: #FFFFDD;
  cursor: hand;
}

.cc {
  border-top: 4px solid #ff66ff;
  background: #fcf;
  cursor: hand;
}

.list2 {
  font-size: 13px;
  line-height: 20px;
  padding: 3px;
  text-align: left;
  background: #FFFFFF;
}

.list2 li {
  color: #333333;
  font-size: 13px;
  line-height: 24px;
  padding: 0 0 0 10px;
  background: url(/images/dot1.gif) no-repeat 2px 12px;
}

.list2 a {
  text-decoration: underline;
}

.lfloat {
  float: left;
}

.rfloat {
  float: right;
}

.ctt {
  padding: 0;
  clear: both;
  border-top: 1px solid #AAC7E9;
  border-right: 1px solid #AAC7E9;
  border-bottom: 1px solid #AAC7E9;
  text-align: left;
  height: 317px;
}

.dis {
  display: block;
}

.undis {
  display: none;
}

li {
  list-style: none;
}

form,
ul {
  padding: 0;
  margin: 0;
}