28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Besoin d'aide pour menu deroulant

bonjour a vous nouveau sur le forum aurais besoin d'aide sur un menu deroulant horizontal mon menu fonctionne parfaitement mais je voudrais y inserer des sous menus supplementaires mais cette fois ci vertical merci a vous .pour expliquer dans mon menu deroulant j'ai un sous menu "Amerique" je souhaiterais donc avoir un sous menu vertical pour y inserer une ville
Modifié par oscars (26 Oct 2006 - 17:39)
Désolé un peu ailleurs j'en oubliais la politesse si quelqu'un avait une solution ou une idée ce serais génial merci d'avance
Administrateur
Hello Oscars,

Le Tutoriel actuel ne permet d'avoir qu'un seul niveau de sous-menu puisqu'il n'est pas autoriser d'imbriquer des liens <a> au sein de liens <a>.

Par contre, en lisant la Note en début du tutoriel, tu trouveras des pistes qui t'aideront. Smiley cligne
merci,
raphael de ta reponse mais je bloque dessus depuis la fin de la matinée donc là j'en ai plein le crane aurais tu une autre idée pour un menu deroulant horizontal pour lequel ca pourrait fonctionner
les liens sont bon mais c'est le nombre de forum que j'ai fait aujourd'hui un petit peu fatigué, la je vais faire une pause je previendrais si j'ai une solution ou solliciterais de l'aide à nouveau merci encore.
Bonjour a vous tous
je reviens a nouveau sur ce sujet mais pour une autre question j'aimerias comprendre comment faire que pour que ce menu ne me decale le contenu qui se trouve en dessous

voici l'ex:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>

<body bgcolor="#CCCCCC">
	<div id="conteneur">
	<div id="header"></div>
	<table width="100%"  border="0" bgcolor="#CCCCCC" align="center" cellpadding="0" cellspacing="5">
	<tr>
    <td colspan="2">
	<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();" ><a href="accueil.html" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Contact</dt>
			<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="contactSAV.html">Service Après-Vente </a></li>
					<li><a href="contactScom.html">Service Commercial</a></li>
					
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Produits</dt>
			<dd id="smenu2"onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="spectroscopy.html">Spectroscopie</a></li>
					<li><a href="chroma.html">Chromatographie</a></li>
					<li><a href="consommable.html">Consommable</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">JASCO  Monde</dt>
			<dd id="smenu3"onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Amérique du Nord</a></li>
					<li><a href="#">Amérique Latine</a></li>
					<li><a href="#">Europe</a></li>
					<li><a href="#">Afrique du Nord</a></li>
					<li><a href="#">Asie</a></li>
					<li><a href="#">Océanie</a></li>
				</ul>
			</dd>
	</dl>
</div>
		
	
	</td>
  </tr>
  </table>
	
	</div>
	<div id="contenu"></div>
</body>
</html>


le css

/* CSS Document */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur
{
width:760px;
height:100px;
background-color:#FFFFFF;
margin:0 auto;
bottom:-80px;
position:relative;
}
#header
{
background-color:#CCCCCC;
background-image:url(image/baniere .jpg);
height:100px;
}
:dl, dt, dd, ul, li
 {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu 
{

left: 0;
z-index:100;

}
#menu dl 
{
float:left;
width: 10.5em;
margin: 0 1px auto;
}
#menu dt 
{
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd 
{
border: 1px solid gray;
}
#menu li
 {
text-align: center;
background: #CCC;
font-weight:bold;
}
#menu li a, #menu dt a 
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;

}
#menu li a:hover, #menu dt a:hover 
{
background: #eee;
}

a {

text-decoration: none;
color: black;
color: #222;
}
#contenu
{
width:760px;
height:100px;
background-color:#FFFFFF;
margin:0 auto;
bottom:-80px;
position:relative;}

merci a vous d'avance ça m'aiderais grandement
je ne sais si je vous ai fait peur mais ça ne me rassure pas trop tout ça
si réelllement quelqu'un avait une idée a mon problème ce serait géniale en vous remerciant d'avance Smiley smile
a force de tourner dans tous les sens et au bout de plusieurs heures de recherche et de bidouille le probleme du menu est enfin resolu
merci encore a vous
Sujet clos
Aller à