28172 sujets

CSS et mise en forme, CSS3

Menu Déroulant 100% CSS

Bonjour,
Ca fait quelque jour que je planche sur un menu déroulant Horizontal en CSS.
Malheureusement j'ai un problème avec mon sous Menu (.sousMenu).
Je n'arrive pas à le faire apparaître sous le Menu principal (#menu) sans que ce dernier se met sous le sous menu.

Je suppose que je devrais faire flotter mon sousMenu mais alors je ne l'ai pas en dessous et le menu principal ce décale.
Mon code HTML:

<ul id="menu">
	<li><a href="#" title="aller à la page arithmétique">Arithmétique</a>
		<ul class="sousMenu">
			<li><a href="#" title="">Fraction Continue</a></li>
			<li><a href="#" title="">Suite de Fibonnaci</a></li>
			<li><a href="#" title="">Équation diophantienne</a></li>
			<li><a href="#" title="">Entiers de Q(&#8730;5)</a></li>
		</ul></li> 
	<li><a href="#" title="aller à la page géométrie">Géométrie</a>
		<ul class="sousMenu">
			<li><a href="#" title="">proportion</a></li>
			<li><a href="#" title="">Rectangle et spirale d'or</a></li>
			<li><a href="#" title="">Pentagone et pentagramme</a></li>
		</ul></li> 
	<li><a href="#" title="aller à la page historique">Histoire</a></li>
	<li><a href="#" title="Savoir où l'on retrouve le nombre d'or">Où le retrouve t on</a></li>
	<li><a href="#" title="Contacter le webmaster">Me contacter</a></li>
</ul>


Mon code CSS:

#menu {
	z-index:2;
	position: absolute;
    left: 240px;    
    top: 155px;
}
#menu li {
    padding: 10px;
    list-style: none;
	display:inline;
}
#menu a {
    color: black;
    font-family: FaithCollapsing,Arial,serif;
    font-size: 1.2em;
}
.sousMenu,.sousMenu li{display: none;}/*Cache le sousMenu*/
#menu .sousMenu li {
display:block;
list-style: none;
border:1px solid black;
max-width:260px;
}
#menu .sousMenu  a{
	font-family: Arial,serif;
}
#menu li:hover ul.sousMenu {/*Fait apparaitre le sousMenu*/
    display: block;
	position:relative;
	top:5px;
}
Pourquoi ?
Mon positionnement absolu, me convient très bien.
Après effectivement le sous-menu position relative n'est pas indispensable.
Je vois pas vraiment mon erreur.
Il est plus logique que les sous-menus soient positionnés en absolu par rapport à leur élément li parent. Or, tes sous-menus sont positionnés en relatif et les éléments li parent de ces sous-menus ne sont pas du tout positionnés.
linktwo a écrit :
Mais alors, chaque sous menu devra avoir son propre positionnement ?

Ce n'est pas nécessaire. N'oublie pas qu'un élément positionné absolument l'est par rapport au plus proche ancêtre positionné. Il suffit de positionner les éléments li qui sont parents des sous-menus, qui se verront appliquer les mêmes propriétés top ou left (ou bottom ou right, c'est selon).
Sujet clos
Aller à