[Résolu] Menu avec sous-menus dans la demo media queries

Bonjour à tous,

Pour l'un de mes clients j'ai pris en base le tuto suivant :
Article media queries

super bien fait !

Je souhaite le modifier, en ajoutant des liens en sous-menu à l'existant, et j'un un souci pour adapter le code :
j'y arrive presque, mais les liens de sous-menu se place les uns à côté des autres, au lieu de se mettre les uns sous les autres.
Je pense que le "float:left;" y est pour quelque chose, mais si je l'enlève c'est toute la mise en page du menu qui foire.

Pourriez-vous me guider pour trouver quelle propriété css dois-je mettre, et où, pour arriver à placer verticalement mes ul de sous-menu sans toucher aux ul de rubriques, horizontales ?

Avec tous mes remerciements...

Je ne vous remet pas le css d'origine, qui est dans le tuto.
Voici mon modifié, qui marche presque :

/*******************************************/
#menu {
	width:100%;
	overflow:auto;
}
#menu, #menu li {
	position:relative;
	list-style-type:none;
	margin:0;
	padding:0;
	/*height:230px;*/
}
#menu, #menu ul {
	position:relative;
	list-style:none;
	margin:0;
	padding:0;
	/*height:230px;*/
}
#menu li {
	float:left;
	position:relative;
	width:19.9%;

}
#menu ul li {
/* on enlève ce comportement pour les liens du sous menu
    display: inherit; */
}
#menu a {
	display:block;
	background:#34637d;
	color:#e09442;
	border-bottom:1px;
	border-left: 1px solid #668a9d;
	text-decoration:none;
	line-height:200%;
	padding:10px;
}
#menu a:hover {
	background:#222;
}
#menu ul {
   position: relative;
  /*on cache les sous menus complètement sur la gauche */
  left: -999em;
   /*display:none;*/  
   /* text-align: left;*/
}
#menu li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
   /*display:block;*/
}
/*******************************************/

<ul id="menu">
			<li><a href="#"><div class="texte-lien">Rubrique1</div></a>
                <ul>
                    <li><a href="#">lien1</a></li>
                    <li><a href="#">lien2</a></li>
                    <li><a href="#">lien3</a></li>
                </ul>
            </li>
			<li><a href="#"><div class="texte-lien">Rubrique2</div></a>
                            <ul>
                    <li><a href="#">lien1</a></li>
                    <li><a href="#">lien2</a></li>
                    <li><a href="#">lien3</a></li>
                </ul>
            </li>
			<li><a href="#"><div class="texte-lien">Rubrique3</div></a>
                            <ul>
                    <li><a href="#">lien1</a></li>
                    <li><a href="#">lien2</a></li>
                    <li><a href="#">lien3</a></li>
                </ul>
            </li>
			<li><a href="#"><div class="texte-lien">Rubrique4</div></a>
             </li>
	</ul>

Eli.
Modifié par eliza (08 Jul 2015 - 16:13)

Bonjour,

Pour les listes imbriquées comme dans un sous-menu l'utilisation du sélecteur CSS ">" peut s'avérer fort utile. Il sélectionne les enfants direct (= 1er niveau)
http://www.w3schools.com/cssref/sel_element_gt.asp

Ex:

#menu > li{}

ne sélectionnera que les <li> du menu principal et non ceux du sous menu.

[EDIT] Tu peux aussi ajouter une classe "sous-menu" sur les <ul> du sous menu pour les styler plus facilement.
Modifié par _laurent (08 Jul 2015 - 13:31)

C'est donc résolu !

eliza a écrit :
C'est donc résolu !

Mais ce n'est pas super joli comme solution. Et les <li> ils deviennent quoi ? des <div> également ?

eliza a écrit :
Ainsi, je n'applique pas le style "ul" au menu, car ça impactait les "li".

C'est pour ça qu'il fallait plutot jouer avec des class et le sélecteur de parenté direct :

<ul class="menu">
    <li></li>
    <li>
        <ul class="sousmenu">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.menu{
    /* menu général*/
}
.menu > li{
    /* seulement les li du menu général*/
}
.sousmenu{
    /* sous menu*/
}
.sousmenu > li{
    /* seleuement les li du sous menu*/
}

Re,

eliza a écrit :
Ta solution est plus élégante !

C'est surtout que des <li> sans <ul> autour c'est un non-sens total et une faute technique !

Bonne continuation !