28172 sujets

CSS et mise en forme, CSS3

Menu déroulant en CSS

Bonjour.
J'essaie d'adapter un menu déroulant pour mon site web. Qui a déjà un menu horizontal.

Mais j'ai du mal avec les sous-listes, elles ne s'affichent pas.
Et lorsqu'elles s'affichent elles sont totalement décalées...

Pourriez-vous m'aider ?

Voici l'url du menu (c'est une page de test)
ici

Je vous fournis également mon code CSS :

ul#menu
{
	height: 26px;
	width: 600px !important;
	padding: 0 0 0 1px;
	margin: 0 !important;
	margin-bottom: -20px;
    background: url('images/menu_bleu.jpg') repeat-x;
	float: left;
	font-weight : bold; 
	font-family : Trebuchet MS; 
    font-size : 11px; 
}

ul#menu a 
{ 
        font-weight: bold;
        text-decoration: none;
        color: #FFFFFF;
        font-size : 11px;
        font-family : Trebuchet MS;
}

ul#menu a:hover 
{ 
        font-weight: bold;
        text-decoration: none;
        color: #FFFFFF;
        font-size : 11px;
        font-family : Trebuchet MS;
}


ul#menu li       
{ 
        display : inline;
        padding : 4px 15px 0 15px;
        float : left;
        background: url('images/menu_bleu.jpg') repeat-x;
        text-decoration: none;
        height: 30px; 
}

ul#menu li:hover       
{ 
        display : inline;
        padding : 4px 15px 0 15px;
        float : left;
        background: url('images/menu_bleu_hover.jpg') repeat-x;
        text-decoration: none;
        height: 30px; 
}

ul#menu li ul li 
{
        background: url('images/test1.png') repeat-x;
        height: 30px;
        position: absolute; 
        width: 144px; 
        left: -999em; 
}


#menu li ul ul 
{
        margin    : -22px 0 0 144px ;  
       
        border-left     : 1px solid #fff ;       
}


html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; 
}

#menu li:hover ul ul, #menu li.sfhover ul ul 
{
        left: -999em; 
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  
{
        left: auto;
        min-height: 0; 
}

Modifié par freakish (23 Mar 2011 - 20:11)
Tout ceci est mal positionné dans ton code :


<!-- Faire un fichier .js et mettre entre les balises head : -->
<script type="text/javascript" src="menutest.js"></script>

<!-- Ou copier le code ci-dessus dans les balises : -->
<script type="text/javascript">
<!--
METTRE LE JAVASCRIPT EN COMMENTAIRES
POUR QUE LE SCRIPT SOIT VALIDE W3C
-->
</script>
<!--  Et mettre tout entre les balises head. -->


Place la ligne 
<script type="text/javascript" src="menutest.js"></script>

dans le head de ta page et efface tout ce qui précède le doctype
bonjour,

il faudrait juste que tu verifie tes selecteurs et/ou jette les morceaux de code inutile :
ul#menu ul ul ne cible rien qui existe ...
Sujet clos
Aller à