将鼠标悬停在链接上时如何使子菜单出现？答案

【问题标题】：how to make sub menu appear when hover over link?将鼠标悬停在链接上时如何使子菜单出现？
【发布时间】：2012-02-15 15:32:18
【问题描述】：

当我将鼠标悬停在链接上时，如何使子菜单消失并出现？

这是我的菜单：

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

}

【问题讨论】：

标签： css

【解决方案1】：

.subsideMenu2 {
  display: none;
}

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

但不能在旧的 Internet Explorer 中工作，对他们来说唯一的选择是 javascript。

【讨论】：

您可以像往常一样设置它的样式，例如使用.subsideMenu2 类。有时您必须将子菜单绝对定位在相对定位的父 li 内，否则当 sumenu 出现在悬停时，一切都会变得一团糟。
erm 如果该项目被选中，那么我如何显示菜单呢？
您应该将class 应用于所选项目，然后将display: block 应用于.sideMenu2 li.selected .subsideMenu2。没有什么秘密，一如既往的 CSS。

【解决方案2】：

查看此标题菜单 dropdwon 样式的示例脚本

http://bit.ly/1abEJ9o

【讨论】：