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

请参阅标题菜单下拉样式的示例脚本

http://bit.ly/1abEJ9o

将鼠标悬停在链接上时如何显示子菜单？

2 个答案: