Sous-menu mouseover cassé

J'ai eu un sous-menu mouseover qui fonctionne très bien sur mon site (si bien qu'il fonctionnait exactement dans Chrome, IE 7 & 8, et FF), mais maintenant il est cassé en quelque sorte et je ne peux pas voir le problème.Sous-menu mouseover cassé

Voici le CSS:

.MainMenu { 
    width: 90% !important; 
    min-width: 800px; 
    height: 42px !important; 
    padding: 0 0 0 10%; 
    overflow: hidden; 
    border-top: 1px solid #0054a6; 
    border-bottom: 1px solid #0054a6; 
    background: transparent url("Images/ServiceMenuBG.png"); 
    background-repeat: repeat-x; 
} 
.MainMenu ul { 
    padding: 0; 
    margin:0; 
    list-style: none; 
} 
.MainMenu li { 
    float: left; 
    position: relative; 
    height: 31px; 
    width: 150px; 
    padding: 11px 0 0 0; 
    text-align: center; 
    border-right: 1px solid #0054a6; 
} 
.MainMenuItem#First { border-left: 1px solid #0054a6; } 
.MainMenuItem a { 
    color: #ffffff; 
    display: block; 
    height: 31px; 
    width: 150px; 
    font-weight: bold; 
    text-decoration: none; 
} 
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; } 
.SubMenu { 
    z-index: 500; 
    display: none; 
    width: 150px !important; 
    position: absolute; 
    top: 10px; 
    left: 0; 
    background-color: rgb(51,118,184); 
} 
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; } 
.SubMenu li a { 
    height: 20px !important; 
    font-weight: normal; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: none; 
} 
.SubMenu li a:hover { text-decoration: underline; } 
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; } 
.MainMenu li.MainMenuItem:hover ul { display: block; }'

Voici le HTML:

<div class="MainMenu"> 
    <ul> 
     <li class="MainMenuItem" id="First"><a href="~/Default.aspx">Home</a></li> 
     <li class="MainMenuItem"><a href="Pages/Philosophies.aspx">Philosophies</a></li> 
     <li class="MainMenuItem"><a href="Pages/Services.aspx#top">Services</a> 
      <ul class="SubMenu"> 
       <li id="TopItem"><a href="Pages/Services.aspx#shop">Shop Repair</a></li> 
       <li><a href="Pages/Services.aspx#donations">Donations</a></li> 
       <li><a href="Pages/Services.aspx#consulting">Consulting</a></li> 
       <li id="BottomItem"><a href="Pages/Services.aspx#on-site">On-site Service</a></li> 
      </ul> 
     </li> 
     <li class="MainMenuItem"><a href="Pages/Contracts.aspx">Contracts</a></li> 
     <li class="MainMenuItem"><a href="Pages/AboutUs.aspx">About Us</a></li> 
     <li class="MainMenuItem"><a href="Pages/ContactUs.aspx">Contact Us</a></li> 
    </ul> 
</div>

Le SubMenu n'affiche pas non plus sur mouseover ou si je l'ai mis est initiale display propriété à block. C'est comme si ça n'existait pas du tout sur la page.

Merci d'avance pour toute aide.

Source

2010-08-25 Logan Young

Ce n'est pas la réponse à votre question, mais je remarquai que vous utilisez des attributs d'ID pour les choses qui devraient vraiment être des noms de classe, par exemple l'élément "TopItem". N'utilisez que des ID sur des éléments uniques à l'ensemble du document. –

Je ne suis pas sûr, mais peut-être avez-vous l'impression que ça n'existe pas parce que vous avez '.MainMenuItem a {color: #ffffff;}'? juste une pensée. un exemple vivant aiderait à mieux comprendre le problème. – Sotiris

@Deniz 'TopItem',' First', et 'BottomItem' dans le code ne sont utilisés qu'à ces endroits de la page. Ce code provient d'une page principale asp.net, il est donc utilisé partout sur le site. Ces noms ne sont utilisés nulle part ailleurs. Je pensais juste que je clarifierais ça. –

.MainMenu { overflow: hidden; }

masque les sous-menus, supprimez cette ligne. Ligne 6 dans votre CSS.

Comme Sotiris mentionné

.MainMenuItem a { color: #ffffff; }

cache les éléments du menu supérieur (peut-être pas sur votre version parce que je vois que vous avez une image d'arrière-plan)

Source

2010-08-25 13:50:44 MattMS

Merci :) Je me demande pourquoi j'ai mis ce 'débordement: caché;' là pour commencer ... –

C'est ok :) La seule raison pour laquelle je pouvais voir serait dans le cas où le texte sort de la zone de titre du menu . Si c'est le cas, vous pouvez appliquer le dépassement: caché; au lien réel à la place, comme dans .MainMenu a {débordement: caché; } Cela s'appliquera également à tous les éléments du menu enfant. Espérons que cela aide. – MattMS

Répondre

Questions connexes