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上，请尝试使用：

<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*/
}

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

2 个答案: