当鼠标悬停在链接上时如何显示子菜单？ [英] how to make sub menu appear when hover over link?

问题描述

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

how do i make a sub menu dissapear and appear when i hover over a link?

这是我的菜单：

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

}

推荐答案

.subsideMenu2 {
  display: none;
}

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

但不能在旧的Internet Explorer中使用，因为他们唯一的选择是javascript。

But won't work in old Internet Explorer, for them the only option is javascript.

这篇关于当鼠标悬停在链接上时如何显示子菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！