マウスクリック(別メニュー表示)

.u-box        { float: left; width: 100px}
.j1           { background:url(images/e0.gif);
                text-align: center;
                height:30px;
              }
.j11          { margin-top: 9px }
a.menu        {
                color: #fff;
                text-decoration: none;
                text-align: center;
                padding: 9px 0px;
                width: 100px;
                height:21px;
                display: block
              }
a:hover.menu  { color: #fc0 }
a:active.menu { color: #f90 }
.j1-moji      { clear: left; padding:5px }
#u1,#u2,#u3   {
                display: none; 
                border:1px solid #999;
                padding:5px;
                line-height:140%;
              }

var m =0;

function bo(x){

 if(document.getElementById){

  if(m!=0 && m==x){
   document.getElementById(m).style.display="none";
   m=0;
  }
  else{
   if(m!=0){
    document.getElementById(m).style.display="none";
   }
   document.getElementById(x).style.display="block";
   m=x;
  }
 }

 else if(document.all){
  if(m!=0 && m==x){
   document.all(m).style.display ="none";
   m=0;
  }
  else{
   if(m!=0){
    document.all(m).style.display = "none";
   }
   document.all(x).style.display = "block";
   m=x;
  }
 }
}

<div class="u-box">
 <div class="j1">
  <div class="j11">
   <a href="javascript:bo('u1')" class="menu">menu1</a>
  </div>
 </div>
 <div id="u1">m1<br>m2<br>m3</div>
</div>

<div class="u-box">
 <div class="j1">
  <div class="j11">
   <a href="javascript:bo('u2')" class="menu">menu2</a>
  </div>
 </div>
 <div id="u2">m1<br>m2<br>m3</div>
</div>

<div class="u-box">
 <div class="j1">
  <div class="j11">
   <a href="javascript:bo('u3')" class="menu">menu3</a>
  </div>
 </div>
 <div id="u3">m1<br>m2<br>m3</div>
</div>

<div class="j1-moji">ボタンクリックに〜</div>