28234 sujets

CSS et mise en forme, CSS3

Adapté un script Alsacréations - Menu CSS

Bonjour,
j'essaie d'adapter le script du menu horizontal en CSS à mon menu déroulant, mais je n'y parviens pas. Je ne vois pas où copier les <dd>, <dl> et <dt>

Mon CSS :

#menu li a { 
	color: #fff; 
	text-decoration: none; 
	background-image: url("images/menu.gif"); 
	background-repeat: no-repeat; 
	background-attachment: scroll; 
	background-position: left top; 
	text-align: center; 
	display: block; 
	}
#menu li a:hover { 
	font-weight: bold; 
	text-decoration: none; 
	background-image: url("images/menu.gif"); 
	background-repeat: no-repeat; 
	background-attachment: scroll; 
	background-position: right top; 
	}

Mon code :

<ul id="menu">
   <li><a title="Accueil" href="index.html" class="active">accueil</a></li>
   <li><a title="metiers" href="metier-infographie.html">metiers</a></li>
   <li><a title="produits" href="produits.html">produits</a></li>
</ul>

Comme mon menu est composé d'images qui changent au survol (selon le principe des portes coulissantes) où dois-je placer le code suivant, afin de faire apparâitre mon menu déroulant sous le lien "produit" (par exemple) :

<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>


Merci,
K
bonjour

<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><a href="produits.html">produits</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Produit1</a></li>
					<li><a href="#">Produit2</a></li>
					<li><a href="#">Produit3</a></li>
					<li><a href="#">Produit4</a></li>
					
				</ul>

			</dd>
	</dl>
<dl>			
		<dt onmouseover="javascript:montre('smenu2');"><a href="metier-infographie.html">metiers</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Métier1</a></li>
					<li><a href="#">Métier2</a></li>
					<li><a href="#">Métier3</a></li>
					<li><a href="#">Métier4</a></li>
					
				</ul>

			</dd>
	</dl>


le code ci-dessus représente un menu avec deux sous-menu, il est à placer dans une <div id="menu"> par exemple pour pouvoir le positionner à l'endroit voulu
Sujet clos
Aller à