28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous
Je suis en train de faire un design pour un site ( Le Site du zero )et je suis tenu de garder le xhtml tel quel.
à partir d'un menu comme ceci :
		
				
		<div id="menu">
			<h5><img src="truc.png" alt="" /> Truc</h5>
			<div class="corpsmenu">
				<ul>
					<li>Truc 1</li>
					<li>Truc 2</li>
					<li>Truc 3</li>

				</ul>
			</div>

			<h5><img src="bidule.png" alt="" />Bidule</h5>
			<div class="corpsmenu">
				<ul>
					
						<li><a href="membres-290.html">Mes options</a></li>
						<li><a href="tuto-55.html">Mes tutos</a></li>				
				</ul>
			</div>

		</div>
			

je voulais faire un menu déroulant. (celui en haut à gauche)
J'ai donc commencé ici : http://public.nanokron.info/mail1789athotmaildotcom/news.html, en utilisant ceci :

/* Menu */

#menu
{
	position:fixed;
	top:0px;
	left:0px;
	
	width:224px;
	height:34px;
	
	margin:0;
	padding:5px;
	
	background:url('../../images/designs/1/menu.png');
	float:left;
}

#menu:hover
{
	background:url('../../images/designs/1/menu2.png');
}
#menu h5
{
	height: 22px;
	width:22px;
	overflow:hidden; /*On limite la zone d'affichage à pile ce qu'il faut*/
	
	padding:0;
	
	margin-top: 6px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:6px; /*les bonnes marges*/
	
	vertical-align: bottom;
	
	float:left;
	
}

#menu .corpsmenu 
{
	
	display:none; /* par défaut, on n'affiche pas les contenus des menus*/
}



#menu h5:hover + .corpsmenu , #menu .corpsmenu:hover /* mais quand ils sont juste après un h5 survolé oux eux-même survolés,... */
{
	display:block; /*on les affiche*/
	position:absolute;
	top:36px;
	left:5px;
	
	width:214px;

	padding: 0;
	margin: 0;
	
	
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	
	border: 5px solid #d8dadb ;
	border-top:10px solid #d8dadb ;
	
	background-color:white;
}


Ce code marche sous gecko et opéra mais khtml, n'aime pas la ligne en gras et le menu ne marche pas ( #menu h5:hover + .corpsmenu )
Avez-vous une solution ?
Merci
Modifié par mail1789 (01 Mar 2006 - 11:42)