菜单项和下拉菜单未正确显示

Question

原始问题

我有一个带有 CSS 菜单的网页。问题是菜单显示正确，但带有子菜单的菜单项除外。在这种情况下，菜单项显示不一致，子菜单根本没有显示。

我已将页面上传至http://prova.webuda.com/account.html。菜单项 ACCOUNT 会出现这样的问题。

另外，我用firebug查看过它，我发现相关的子菜单未排序列表是灰色的，这让我认为一定有一些解析问题。不过根据我的分析应该没问题。

我做错了什么？有人可以帮帮我吗？

编辑

CSS

#mainMenu
{
font-size: 0.85em;
}

#mainMenu ul
{

    margin: 0;
    padding: 0;
    text-transform: uppercase;


}



#mainMenu ul li, #mainMenu ul li:hover
{

    height:50px;
    float:left;

    text-align:center;
    font-weight:bold;
    font-size:1.7em;
    overflow:hidden;
    margin-left:1.05em;
    margin-right:1.05em;
}

#mainMenu ul li a, #mainMenu ul li span a
{
    color:brown;
    text-decoration:none;
    color:#006;
}

.mainSubMenu
{display:none;}


#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
#mainMenu ul li ul{position: absolute;left:-1px;top:98%;}

#mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}
#mainMenu ul ul{
    width:119.7px;
}

HTML

      <div class="mainMenu" id="mainMenu">
        <ul>
          <li class="menuItem" id="menuItem1"> <a href="./squadra.html">Squadra</a> </li>
          <li class="menuItem" id="menuItem2"> <a href="./biglietti.html">Biglietti</a> </li>
          <li class="menuItem" id="menuItem3"> <a href="abbonamenti.html">Abbonamenti</a> </li>
          <li class="menuItem" id="menuItem4"> <a href="ritiro.html">Ritiro</a> </li>
          <li class="menuItem" id="menuItem5"> <a href="fidelityCard.html">Fidelity Card</a> </li>






          <li class="menuItem" id="menuItem7"> <span> <a href="account.html">Account</a> </span>
            <ul class="mainSubMenu">
                <li class="subMenuItem"><a class="pureCssMenui" href="profilo.html">Profilo</a></li>
                <li class="subMenuItem"><a class="pureCssMenui" href="datiFatturazione.html">Dati Fatturazione</a></li>
                <li class="subMenuItem"><a class="pureCssMenui" href="storicoTifoso.html">Storico Tifoso</a></li>
                <li class="subMenuItem"><a class="pureCssMenui" href="esci.html">Esci</a></li>
            </ul>




          </li>
        </ul>
      </div>

最重要的是不工作的部分是#mainMenu ul li:hover #mainMenu ul li ul{display:block;}

Answer 1

您的 CSS 存在一些问题。首先，# 选择器仅适用于设置了 id 的元素。例如，#menuItem 将样式应用于任何带有id="menuItem" 的元素。但是，您的 HTML 包含 class="menuItem"，因此您必须改用 . 选择器。

其次，根据#mainMenu ul li ul{position: absolute;left:-1px;top:98%;} 和#mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}，当菜单确实出现时，它显示在页面下方太远，用户无法看到。

以下是更正：

.mainMenu
{
font-size: 0.85em;
}

.mainMenu
{
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.mainMenu ul li, .mainMenu ul li:hover
{

    height:50px;
    float:left;
    text-align:center;
    font-weight:bold;
    overflow:hidden;
    margin-left:1.05em;
    margin-right:1.05em;
}

.mainMenu ul li a, .mainMenu ul li span a
{
    color:brown;
    text-decoration:none;
    color:.006;
}

.mainSubMenu
{display:none;}


.mainMenu:hover .mainSubMenu {display:block}

.mainMenu ul li ul{position: absolute;left:1px;top:2%;}

.mainMenu ul ul ul{position: absolute;left:2%;top:2px;}
.mainMenu ul ul{
    width:119.7px;
}

还有一个工作小提琴：http://jsfiddle.net/Af7SE/

另外，here is another example 类似您的菜单。

Answer 2

第一个问题是因为你最后一个<a> 嵌套在<span> 上，尝试使用：

<li class="menuItem" id="menuItem7">
    <a href="account.html">Account</a>
       <ul class="mainSubMenu">
         ....   
        </ul>
</li>

您的菜单永远不会显示，因为您的子菜单上的overflow:hidden; 和静态width 有问题，请尝试使用下一个代码，它会显示您的子菜单，但您需要进行更多更改。

#mainMenu ul li:hover ul{display:block;}

而不是

#mainMenu ul li:hover #mainMenu ul li ul{display:block;}

删除所有溢出：隐藏，因为它隐藏了您的子菜单，我对示例进行了一些修改：

http://jsfiddle.net/NrA8A/

#mainMenu ul {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    list-style: none; /*remove the bullets*/
}
    
#mainMenu ul li, #mainMenu ul li:hover {
    .....
    /*Remove the overflow :hidden*/
}