Пункт меню и меню выпадающим не будут правильно отображаться

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 { размер шрифта: 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*/ 
}