菜单项，而不是显示下拉菜单正确

Question

原始的问题

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

我上传了页面http://prova.webuda.com/account.html。菜单项ACCOUNT出现这种问题。

此外，我用萤火虫看过它，我已经看到相关的子菜单unsorted列表是灰色的，这使我认为必须有一些解析问题。但是，从我的分析中，它应该没问题。

我在做什么错？有人能帮帮我吗？

编辑

的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 { 字体大小：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

的第一个问题是，因为你的最后嵌套在一个，请尝试使用：

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