リンク上にカーソルを置いたときにサブメニューを表示する方法は？

Question

リンク上にカーソルを置くと、サブメニューが消えて表示されます。

これが私のメニューです：

<div class="sideMenu2"> 
     <ul> 
     <li><a href>retail</a> 
       <ul class="subsideMenu2"> 
          <li>cabot circus</li> 
          <li>st. stephen&#39;s</li> 
          <li>silverburn</li> 
          <li>braehead</li> 
       </ul> 
     </li> 
      <li><a href>sports &amp; leisure</a> 
       <ul class="subsideMenu2"> 
       </ul> 
     </li> 
     </ul> 
     </div> 

は、これが私の現在のCSSです：

.sideMenu2 ul li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
    background:url(../images/point.png) no-repeat; 
    font-weight:bold; 
} 

.sideMenu2 ul 
{  
    padding: 15px 0px 0px 0px; 
    list-style-type:none; 
    font-size:0.9em; 
    width:20em; 
    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu2 ul a{ 
    padding: 2px 20px 0px 0px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
    width:19.2em; 
} 

.sideMenu2 li a 
{ 
    height:2em; 
    padding-top: 1px; 
    padding-left:15px; 
} 

.sideMenu2 li a:hover{ 
    background:url(../images/point.png) no-repeat; 
    cursor:pointer; 
    padding-left:-15px; 

} 

Answer 1

.subsideMenu2 { 
    display: none; 
} 

.sideMenu2 li:hover .subsideMenu2 { 
    display: block; 
} 

しかし、彼らのために唯一のオプションはjavascriptのある、古いInternet Explorerで動作しません。

Answer 2

は、@Beginnerをヘッダメニューdropdwonスタイルのこのサンプルスクリプト

http://bit.ly/1abEJ9o