Menu Item and Drop Down menu not displaying correctly

Question

Original Question

I have a webpage with a css menu. The problem is that the menu is displaying properly except for menu items wit a submenu. I this case the menu items not displaying consistently and the the submenu is not showing at all.

I have uploaded the page at http://prova.webuda.com/account.html. Such a problem occurs with the menu item ACCOUNT.

Also, I have looked at it with firebug and I have seen that the relavant submenu unsorted list is grayed out, which makes me suppose that there must be some parsing issue. However, from my analysis it should be fine.

What am I doing wrong? Can somebody please help me?

Edit

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>

Most significantly the part which is not working is #mainMenu ul li:hover #mainMenu ul li ul{display:block;}

Answer 1

The first problem is because your last <a> is nested on a <span>, try using:

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

And your menu never show because has a problem with the overflow:hidden; and the static width on your submenu, try using the next code, it will show your submenu but you will need make more changes.

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

instead of

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

remove all the overflow:hidden because it hide your submenu, I make some modifications for the example:

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

Answer 2

There are a few issues with your CSS. First, the # selector only works for elements that have the id set to that. For example, #menuItem applies styling to any element with id="menuItem". However, your HTML has class="menuItem", so you must use the . selector instead.

Second, when the menu does appear, it appears too far down the page for the user to see, as per #mainMenu ul li ul{position: absolute;left:-1px;top:98%;} and #mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}.

Here are the corrections:

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

And a working fiddle: http://jsfiddle.net/Af7SE/

Also, here is another example of a menu like yours.