18073 sujets

Questions générales et questions de débutants

Combinaison menu graphique et deroulant vertical

Bonjour à tous,

J'ai décidé de me mettre aux standards web et donc d'utiliser les css.
En voulant refaire un site qui etait mis en page avec fireworks en xhtml, je suis confronté à un problème qui pour moi débutant dans ce domaine est difficile à résoudre.

Je voudrais avoir des sous-menus qui s'affiche au passage de la souris sur un menu graphique crée avec un des tutoriaux du site.
http://css.alsacreations.com/modelesmenus/g02.htm

Mon problème est que je n'arrive pas à m'en sortir avec les balises <dl> <dt> <dd> et les intégrer dans la liste nécessaire au menu graphique.

Voilà le code de mon graphique : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu Horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>

<style type="text/css">
html, body {
	margin:0;
	padding:0;
	height:100%;
}

#header{
  width: 800px;
  height: 165px;
}

ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}


ul {
	position: absolute;
	background: transparent url(imgs/bg_menu.gif) top left no-repeat;
	width: 800px;
	height:165px;
	left:0;
    top:0;
    z-index: 2;
}

li {float: left;}

li a {	/* dimensions et dfinitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 165px;
width: 87px;
text-decoration:none;
}

li a:hover {
background: transparent url(imgs/bg_menu.gif) top left no-repeat;
}

a#menu1:hover {
background-position: -800px 0%;	/* dcalage de l'arrire-plan pour chaque bouton */
}
a#menu2:hover {
background-position: -887px 0%;
}
a#menu3:hover {
background-position: -974px 0%;
}
a#menu4:hover {
background-position: -1061px 0%;
}
a#menu5:hover {
background-position: -1148px 0%;
}
a#menu6:hover {
background-position: -1235px 0%;
}
a#menu7:hover {
background-position: -1322px 0%;
}
a#menu8:hover {
background-position: -1409px 0%;
}
#flash{
  position:absolute;
  left:114px; top:2px;
  width:386px; height:76px;
  z-index: 1;
}

-->
</style>
</head>
<body>

<div id="header">
<div id="flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="686" height="95">
    <param name="movie" value="imgs/AnimEng.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <embed src="imgs/AnimEng.swf" width="686" height="95" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
    </div>

<ul>
	<li><a id="menu1"  accesskey="1" ></a></li>
	<li><a id="menu2"  accesskey="2" href="#"></a></li>
    <li><a id="menu3"  accesskey="3" href="#"></a></li>
	<li><a id="menu4"  accesskey="4" href="#"></a></li>
	<li><a id="menu5"  accesskey="5" href="#"></a></li>
	<li><a id="menu6"  accesskey="6" href="#"></a></li>
   	<li><a id="menu7"  accesskey="7" href="#"></a></li>
    <li><a id="menu8"  accesskey="8" href="#"></a></li>

</ul> </div>



</div>
</body>
</html>


Si quelqu'un pouvait me donner le code necessaire pour intégrer des sous menus sous les différents boutons çà maiderait beaucoup.

Merci d'avance à tous et bravo pour votre magnifique site
Sujet clos
Aller à