如何让悬停在链接上的子菜单出现？

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; 
} 

，但不会在旧的Internet Explorer的工作，对他们唯一的选择是JavaScript的。

Answer 2

看到的标题菜单dropdwon风格

http://bit.ly/1abEJ9o