Surlignage texte Menu déroulant lors du hover

Fermé
Anselme - 12 mars 2013 à 18:40
 anselme - 4 avril 2013 à 17:06
Bonjour,

J'ai un probleme avec mon menu deroulant lors du hover.
Le principe est simple, j'ai un menu déroulant standard, sans fioritures.
Ce que je voudrais c'est que lorsque du survol d'une catégorie; le background se limite uniquement à la largeur et à la hauteur du texte.
Or impossible d'y arriver. J'arrive a eventuellement a y arriver en largeur (de maniere pas tres propres) mais impossible au niveau de la hauteur. Il y a toujours un espace pas tres jolie sur entre le haut de la police et le haut du background.

Voici ce que cela donne:
Ce que j'ai :
http://i.stack.imgur.com/11sCH.png

Ce que j'aimerais avoir:
http://i.stack.imgur.com/JmVJW.png


Vous trouverez ci joint mon code html
<div id="menu">
                    <ul id="MenuDeroulant">
                        <li style="margin-left:-10px;"><a href="#" style="">Main categorie</a>
                            <ul>            
                                <li><a href="" >Subcat 1</a></li>
                                <li><a href="" >Subcat 2</a></li>

                            </ul>
                        </li>
                    </ul>
</div>


Et mon code html:
 #MenuDeroulant
{
    margin: 0;
    padding: 0
}
#MenuDeroulant li
{    
    float: left;
    list-style: none;
}
#MenuDeroulant li a
{    
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    color: #000; 
    white-space: nowrap;
    text-align:center;
}

#MenuDeroulant li a:hover
{    
    background: #000;
    color: #FFF;
} 

#MenuDeroulant li ul
{   visibility: hidden;
    padding: 0px 0px;
}

#MenuDeroulant li ul li
{    
    float: none;
    display: inline;
}

#MenuDeroulant li ul li a
{    
width: auto;
padding: 0px 0px;
} 

#MenuDeroulant li ul li a:hover
{    
background: #0000;
padding: 0px 0px;
} 



En vous remerciant pour votre aide;

Anselme
A voir également:

2 réponses

epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
12 mars 2013 à 20:05
bonsoir Anselme
ton #MenuDeroulant li a ayant pas de taille précisé, le background devrait se limiter au texte, tu n'a pas d'autre CSS qui s'applique aux a ?

dans #MenuDeroulant li a {
ajoutes
padding: 0px !important;



--
1
Bonsoir,

Merci pour votre réponse..

J'ai essayé votre tips mais malheureusement cela ne change rien sur le rendu.
Peut etre je peux vous envoyer l'adresse du site en mp si vous voulez voir le rendu ?

en vous remerciant ,

Anselme
0
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
14 mars 2013 à 20:09
oui si tu veux
0
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
14 mars 2013 à 21:32
ok,
#MenuDeroulant li a
tu enleves display:block
#MenuDeroulant li
tu ajoutes display:block et sans doute text-align:center
#MenuDeroulant li ul li
tu enleves display:inline

j'ai pas fais menu bas mais c'est le meme principe, ne pas mette display block a <a>, mais a son <li> contenair
et pareil
#MenuDeroulant li ul li pareil c'est juste float:none pas de display:inline
0
merci beaucoup c'est beaucoup mieux en effet.
par contre j'ai toujours un probleme sur la hauteur du surlignage. Je n'arrive pas à le faire à ras de la police en hauteur. Il y a toujours un espace..
si tu as une idée.
merci en tout cas..
0
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
24 mars 2013 à 12:31
re peut etre mettre a
a{line-height:none;
0
Profil bloqué
27 mars 2013 à 12:49
Je n'ai pas lu ce qu'il y a au-dessus (honte à moi), mais essaie de remplacer tes
padding: 0px 0px;
par
padding: 0px;


0