Adaptation du menu déroulant CSS

Bonjour,
je suis en train de refaire mon site (www.guigro.com) et j'ai un petit soucis...

Je désirerais mettre un menu déroulant horizontal avec les images du haut, mais celles-ci sont affichées par la balise <ul> puis les images par les balises <li>.
Pour y remédier, j'ai donc remanié un peu la feuille de style...
Voilà ce que ça donne :
http://www.guigro.com/guigro.com/index.html << Le design intégré sans aucune retouche
http://www.guigro.com/guigro.com/index2.html << Le design retouché (rollover sur les images du haut + menus déroulants)

Donc on voit bien que le menu du haut n'est plus à sa place...
Pour que vous y voyez plus clair, voici les codes :

>> Le CSS de l'intégration sans retouche (index.html)

a écrit :
*{margin:0;padding:0;}

body{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif ;
font-size: 12px;
color: #000;
background:white url("images/fond.jpg") repeat-x;
}

a img{border: none;}

/*//////////////////////////////////////// GLOBAL /////////////////////////////////////////*/

div#global{width:945px;margin:auto;}
div#edito{width:700px;margin:0 auto;}

/*//////////////////////////////////////// HEADER /////////////////////////////////////////*/

h1{width:325px;height:87px;float:left;}

/*//////////////////////////////////////// NAVIGATION /////////////////////////////////////////*/

ul#navigation{list-style:none;}
ul#navigation li{display:inline;}
ul#navigation li a{height:26px;float:left;text-indent:-9999px;margin-top:61px;}
ul#navigation li a#guigro{width:71px;margin-left:99px;background:url("images/guigro.jpg") no-repeat;}
ul#navigation li a#videos{width:78px;margin-left:15px;background:url("images/videos.jpg") no-repeat;}
ul#navigation li a#portfolio{width:93px;margin-left:19px;background:url("images/portfolio.jpg") no-repeat;}
ul#navigation li a#forums{width:81px;margin-left:18px;background:url("images/forums.jpg") no-repeat;}
ul#navigation li a#partenaires{width:127px;margin-left:18px;background:url("images/partenaires.jpg") no-repeat;}

/*//////////////////////////////////////// MENU DE DROITE /////////////////////////////////////////*/

div#right{width:125px;float:right;margin:15px 0 15px 0;}
div#right div.menu{background:#7ad8ff url("images/menu.jpg") no-repeat 0 0;margin-bottom:10px;}
div#right div.menu h2{color:white;border-bottom:1px dashed white;width:100px;margin:0 auto;font-size:20px;}
div#right div.menu h2 img{vertical-align:middle;}
div#right div.menu ul{list-style:none;color:white;margin:15px 0 0 5px;}
div#right div.menu ul li a{color:white;text-decoration:none;}
div#right div.menu ul li a:hover{text-decoration:underline;}
div#right div.menu div.menu_bas{height:10px;background:url("images/menu_bas.jpg") no-repeat left bottom;}

/*//////////////////////////////////////// CONTENT /////////////////////////////////////////*/

div#left{width:515px;clear:left;padding-top:10px;}
div#left div.content{background:url("images/content.jpg") repeat-y 0 0;}
div#left div.content h2{height:26px;padding:30px 0 0 30px;background:url("images/h2.jpg") no-repeat 0 0;color:#20beff;font-size:16px;font-family:arial;}
div#left div.content div.text{margin-left:30px;}
div#left div.content div.bas{height:40px;background:url("images/bas.jpg") no-repeat left bottom;}

/*//////////////////////////////////////// FOOTER /////////////////////////////////////////*/

p#footer{height:40px;line-height:40px;color:black;clear:both;text-align:center;}
p#footer a{color:black;}

>> Le HTML qui affiche le menu de la page sans retouche (index.html) :

a écrit :
<!--HEADER-->
<h1><img src="images/header.jpg" alt="header" /></h1>
<!--NAVIGATION-->
<ul id="navigation">
<li><a id="guigro" href="#">guigro</a></li>
<li><a id="videos" href="#">videos</a></li>
<li><a id="portfolio" href="#">portfolio</a></li>
<li><a id="forums" href="#">forums</a></li>
<li><a id="partenaires" href="#">partenaires</a></li>
</ul>

>> La partie du CSS retouché que j'ai modifiée (index2.html) :

a écrit :
/*//////////////////////////////////////// NAVIGATION /////////////////////////////////////////*/

ul#navigation{list-style:none;}
ul#navigation li{display:inline;}
ul#navigation li a{height:26px;float:left;text-indent:-9999px;margin-top:61px;}
ul#navigation dl, dt, dd, li {margin: 0;padding: 0;list-style-type: none;}
ul#navigation {margin: 0;padding: 0;top:0;left:0;}
ul#navigation dl{float: left;width: 110px;height: 25px;}
ul#navigation dt{float:left;width: 110px;height: 25px;text-align: center;}

#guigro{width:71px;margin-left:99px;background:url("images/guigro.jpg") no-repeat;}
#guigro:hover, #guigro:focus, #guigro:active{width:71px;margin-left:99px;background:url("images/guigro2.jpg") no-repeat;}

#videos{width:78px;margin-left:15px;background:url("images/videos.jpg") no-repeat;}
#videos:hover, #videos:focus, #videos:active{width:78px;margin-left:15px;background:url("images/videos2.jpg") no-repeat;}

#portfolio{width:93px;margin-left:19px;background:url("images/portfolio.jpg") no-repeat;}
#portfolio:hover, #portfolio:focus, #portfolio:active{width:93px;margin-left:19px;background:url("images/portfolio2.jpg") no-repeat;}

#forums{width:81px;margin-left:18px;background:url("images/forums.jpg") no-repeat;}
#forums:hover, #forums:focus, #forums:active{width:81px;margin-left:18px;background:url("images/forums2.jpg") no-repeat;}

#partenaires{width:127px;margin-left:18px;background:url("images/partenaires.jpg") no-repeat;}
#partenaires:hover, #partenaires:focus, #partenaires:active{width:127px;margin-left:18px;background:url("images/partenaires2.jpg") no-repeat;}

ul#navigation dt a{height: 25px;width: 110px;display: block;}
ul#navigation dd {margin-top:25px;display: none;height: 79px;width: 110px;position:relative;z-index:2;overflow: hidden;background-color:#333333;}
ul#navigation li {height: 25px;width: 110px;border-top: 1px solid #000000;text-align: center;}
ul#navigation li a{height: 25px;width:110px;color:#999999;line-height:25px;text-decoration: none;display: block;/*background: url("images_home/button.jpg") no-repeat 0 0;*/}
ul#navigation li a:hover, #navigation li a:focus, #navigation dt a:focus {color:#FFFFFF;background-color:#0000FF;}
ul#navigation dt a:hover{color:#FFFFFF;background-position: 0 -25px;}

La partie HTML de l'index2.html qui affiche les menus et sous menus :

a écrit :
<ul id="navigation">
<dl>
<dt id="guigro" onmouseover="javascript:montre('smenu1');"><a href=""></a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

<li><a title="" href="#">Sous-Menu 1.1</a></li>

<li><a title="" href="#">Sous-Menu 1.2</a></li>
<li><a title="" href="#">Sous-Menu 1.3</a></li>

</dd>
</dl>

<dl>
<dt id="videos" onmouseover="javascript:montre('smenu2');"><a href=""></a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">

<li><a title="" href="#">Sous-Menu 1.1</a></li>

<li><a title="" href="#">Sous-Menu 1.2</a></li>
<li><a title="" href="#">Sous-Menu 1.3</a></li>

</dd>
</dl>

<dl>
<dt id="portfolio" onmouseover="javascript:montre('smenu3');"><a href=""></a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

<li><a title="" href="#">Sous-Menu 1.1</a></li>

<li><a title="" href="#">Sous-Menu 1.2</a></li>
<li><a title="" href="#">Sous-Menu 1.3</a></li>

</dd>
</dl>

<dl>
<dt id="forums" onmouseover="javascript:montre('smenu4');"><a href=""></a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">

<li><a title="" href="#">Sous-Menu 1.1</a></li>

<li><a title="" href="#">Sous-Menu 1.2</a></li>
<li><a title="" href="#">Sous-Menu 1.3</a></li>

</dd>
</dl>

<dl>
<dt id="partenaires" onmouseover="javascript:montre('smenu5');"><a href=""></a></dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">

<li><a title="" href="#">Sous-Menu 1.1</a></li>

<li><a title="" href="#">Sous-Menu 1.2</a></li>
<li><a title="" href="#">Sous-Menu 1.3</a></li>

</dd>
</dl>
</ul>

Et puis enfin ma question : peut-on imbriquer plusieurs ul et li comme ça ?? Et comment puis-je remettre mon menu à sa place ??
Merci

Lol je me prend la tête depuis des heures sur ce menu W_W

En fait ton menu devrait être structuré de la façon suivante:

<ul>
  <li>
    <dl>
      <dt><img src=".." alt=".." /></dt>
      <dd>
        <ul>
          <li><a href=".."></a></li>
          <li><a href=".."></a></li>
          <li><a href=".."></a></li>
        </ul>
      </dd>
    </dl>
  <li>

  <li>
    <dl>
      <dt><img src=".." alt=".." /></dt>
      <dd>
        <ul>
          <li><a href=".."></a></li>
          <li><a href=".."></a></li>
          <li><a href=".."></a></li>
        </ul>
      </dd>
    </dl>
  <li>
</ul>

Il est important que les images soient directement dans le code html avec un alt correct.
Modifié par <nicolas> (05 May 2007 - 11:40)

<nicolas> a écrit :
En fait ton menu devrait être structuré de la façon suivante:

Qu'est-ce que c'est que cette horreur ?

Des listes de définitions détournées à des fins de présentations/script dans des listes non ordonnées structurant un contenu qui, en fait, aurait d'abord besoin de titre <hn>...

Non, franchement...

Je vais essayer la méthode de nicolas, merci.
En fait je vous explique la petite histoire.
Mon codeur m'a fait l'intégration en pensant que les titres des menus seraient des liens, et moi je voulais que ça soit des menus déroulants (en gros on s'était mal compris, ou plutôt j'avais mal expliqué).
Et maintenant j'essaye de faire moi-même pour que ça fonctionne, donc cela explique mon CSS de la page index2.html "sale"...


Je viens de tester la solution de Nicolas, qui me donne le titre du menu tout en haut et sans menu déroulant (j'ai mis le mouseover etc...)

C'était pour réutiliser les listes qui semblait être à la base de son menu. Mais à vrai dire je ne suis pas fan de ça non plus et je les utilise rarement. Mais je pensais bien de lier chaque entrée du menu avec les sous-menus correspondants. Par contre les listes non-ordonnées pour un menu ça reste correct non?

EDIT: Guigro si tu utilises ma structure vire simplement toutes les dl, dt et dd.. Et comme l'a suggéré Laurent, encadre les img avec un h2 ou h3 ou h4.
Modifié par <nicolas> (05 May 2007 - 13:19)

Encore 3h de perdues ce matin.
J'ai réussi à mettre le calque navigation en h3, mais après ça, toute modif me casse tout le code...

HTML :

a écrit :
<h3 id="navigation">
<li><a id="guigro" href="#">guigro</a></li>
<li><a id="videos" href="#">videos</a></li>
<li><a id="portfolio" href="#">portfolio</a></li>
<li><a id="forums" href="#">forums</a></li>
<li><a id="partenaires" href="#">partenaires</a></li>
</h3>

CSS :

a écrit :
h3#navigation{list-style:none;}
h3#navigation li{display:inline;}
h3#navigation li a{height:26px;float:left;text-indent:-9999px;margin-top:61px;}

h3#navigation li a#guigro{width:71px;margin-left:99px;background:url("images/guigro.jpg") no-repeat;}
h3#navigation li a#guigro:hover, h3#navigation li a#guigro:focus, h3#navigation li a#guigro:active{width:71px;margin-left:99px;background:url("images/guigro2.jpg") no-repeat;}
h3#navigation li a#videos{width:78px;margin-left:15px;background:url("images/videos.jpg") no-repeat;}
h3#navigation li a#videos:hover, h3#navigation li a#videos:focus, h3#navigation li a#videos:active{width:78px;margin-left:15px;background:url("images/videos2.jpg") no-repeat;}
h3#navigation li a#portfolio{width:93px;margin-left:19px;background:url("images/portfolio.jpg") no-repeat;}
h3#navigation li a#portfolio:hover, h3#navigation li a#portfolio:focus, h3#navigation li a#portfolio:active{width:93px;margin-left:19px;background:url("images/portfolio2.jpg") no-repeat;}
h3#navigation li a#forums{width:81px;margin-left:18px;background:url("images/forums.jpg") no-repeat;}
h3#navigation li a#forums:hover, h3#navigation li a#forums:focus, h3#navigation li a#forums:active{width:81px;margin-left:18px;background:url("images/forums2.jpg") no-repeat;}
h3#navigation li a#partenaires{width:127px;margin-left:18px;background:url("images/partenaires.jpg") no-repeat;}
h3#navigation li a#partenaires:hover, h3#navigation li a#partenaires:focus, h3#navigation li a#partenaires:active{width:127px;margin-left:18px;background:url("images/partenaires2.jpg")

Et là je suis perdu mdr
J'ai le code, mais dès que j'essaye de l'adapter il me foire toute la page...
Modifié par guigro (06 May 2007 - 12:56)

J'avance !!
Enfin... Maintenant ça me fait un truc trèèès bizarre !
Regardez cette page sous IE, puis sour Firefox... http://www.guigro.com/guigro.com/index4.html
Sous Firefox, le menu d'affiche comme il faut, mais dès qu'on survole un titre, les autres se décalent et le contenu du titre s'affiche en haut et pas dans un sous menu, ainsi que aucune disparition des liens lorsque la souris quitte le titre.
Sous IE, les sous-menus s'affichent à peu près comme il faut mais les titres sont placés n'importe où dans la page... C'est à y perdre la tête !!!

Voici les codes :
CSS :

dl, dt, dd, ul, li{margin: 0;padding: 0;list-style-type: none;}
h3#navigation{list-style:none;}
h4{display:inline;}
h4 dt{height:26px;float:left;text-indent:-9999px;margin-top:61px;}
dt#guigro{width:71px;margin-left:99px;background:url("images/guigro.jpg") no-repeat;}
dt#guigro:hover, dt#guigro:focus, dt#guigro:active{width:71px;margin-left:99px;background:url("images/guigro2.jpg") no-repeat;}
dt#videos{width:78px;margin-left:15px;background:url("images/videos.jpg") no-repeat;}
dt#videos:hover, dt#videos:focus, dt#videos:active{width:78px;margin-left:15px;background:url("images/videos2.jpg") no-repeat;}
dt#portfolio{width:93px;margin-left:19px;background:url("images/portfolio.jpg") no-repeat;}
dt#portfolio:hover, dt#portfolio:focus, dt#portfolio:active{width:93px;margin-left:19px;background:url("images/portfolio2.jpg") no-repeat;}
dt#forums{width:81px;margin-left:18px;background:url("images/forums.jpg") no-repeat;}
dt#forums:hover, dt#forums:focus, dt#forums:active{width:81px;margin-left:18px;background:url("images/forums2.jpg") no-repeat;}
dt#partenaires{width:127px;margin-left:18px;background:url("images/partenaires.jpg") no-repeat;}
dt#partenaires:hover, dt#partenaires:focus, dt#partenaires:active{width:127px;margin-left:18px;background:url("images/partenaires2.jpg") no-repeat;}

h3#navigation dl{width: 110px;height: 25px;}
/*h3#navigation dt{width: 110px;height: 25px;text-align: center;}
h3#navigation dt a{height: 25px;width: 110px;display: block;}*/
h3#navigation dd{margin-top:25px;display: none;height: 79px;width: 110px;position:relative;z-index:2;overflow: hidden;background-color:#333333;}
h3#navigation li{height: 25px;width: 110px;border-top: 1px solid #000000;text-align: center;}
h3#navigation li a{height: 25px;width:110px;color:#999999;line-height:25px;text-decoration: none;display: block;}
h3#navigation li a:hover, h3#navigation li a:focus, h3#navigation dt a:focus{color:#FFFFFF;background-color:#0000FF;}
h3#navigation dt a:hover{color:#FFFFFF;background-position: 0 -25px;}

HTML :

<h3 id="navigation">
			<h4>
				<dl>
					<dt id="guigro" onmouseover="javascript:montre('smenu1');"><a href="#"></a></dt>
					<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="#">SSS</a></li>
						</ul>
					</dd>
				</dl>
			</h4>
			<h4>
				<dl>
						<dt id="videos" onmouseover="javascript:montre('smenu2');"><a href="#"></a></dt>
						<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
							<ul>
								<li><a href="#">SSS</a></li>
							</ul>
						</dd>
					</dl>
			</h4>
			<h4>
				<dl>
					<dt id="portfolio" onmouseover="javascript:montre('smenu3');"><a href="#"></a></dt>
					<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="#">SSS</a></li>
						</ul>
					</dd>
				</dl>
			</h4>
			<h4>
				<dl>
					<dt id="forums" onmouseover="javascript:montre('smenu4');"><a href="#"></a></dt>
					<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="#">SSS</a></li>
						</ul>
					</dd>
				</dl>
			</h4>
			<h4>
				<dl>
					<dt id="partenaires" onmouseover="javascript:montre('smenu5');"><a href="#"></a></dt>
					<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
						<ul>
							<li><a href="#">SSS</a></li>
						</ul>
					</dd>
				</dl>
			</h4>
		</h3>

Bonjour,
je voulais vous dire mon avancement, et la continuité de mes problèmes !!
J'ai enfin réussi à intégrer le menu déroulant dans mon site !! YOUPI !!
Mais cependant il reste quelques problèmes avec lesquels j'ai du mal... des bricoles...
Tout d'abord, voici le menu intégré : http://www.guigro.com/guigro.com/index.html
Et voici les problèmes rencontrés :
- Déjà, ça serait pas mieux avec une bordure tout autour du menu ?? Je pense que oui, et je n'y arrive pas (j'ai testé le border:1px sur le <dd> mais ça ne change rien)
- Il faudrait que les menus soient plus "collés" au titre, car lorsqu'on passe sur la zone entre le titre et le menu, le menu peut disparaître, ce qui n'est pas pratique, et si le menu pouvait être centré sous l'image, parce que la on dirait qu'il est aligné pour être à gauche, et si la taille du titre change, ce n'est pas très joli.
- Lorsqu'on survole le titre, mais pas le menu, celui-ci reste affiché ! J'ai bien tenté un onmouseout="javascript:montre('');" sur le titre, mais dans ce cas la même si je veux aller sur le menu, il me le cache.

et le problème MAJEUR :
- Les liens du menus ne s'affichent pas... aucun texte ne veut apparaître

Voilà voilà, pour le code voici le CSS :

h3{list-style:none;}
h3 dl{display:inline;height:26px;float:left;text-indent:-9999px;margin-top:61px;}

h3 dl#guigro{width:71px;margin-left:99px;background:url("images/guigro.jpg") no-repeat;}
h3 dl#guigro:hover, h3 dl#guigro:focus, h3 dl#guigro:active{width:71px;margin-left:99px;background:url("images/guigro2.jpg") no-repeat;}

h3 dl#videos{width:78px;margin-left:15px;background:url("images/videos.jpg") no-repeat;}
h3 dl#videos:hover, h3 dl#videos:focus, h3 dl#videos:active{width:78px;margin-left:15px;background:url("images/videos2.jpg") no-repeat;}

h3 dl#portfolio{width:93px;margin-left:19px;background:url("images/portfolio.jpg") no-repeat;}
h3 dl#portfolio:hover, h3 dl#portfolio:focus, h3 dl#portfolio:active{width:93px;margin-left:19px;background:url("images/portfolio2.jpg") no-repeat;}

h3 dl#forums{width:81px;margin-left:18px;background:url("images/forums.jpg") no-repeat;}
h3 dl#forums:hover, h3 dl#forums:focus, h3 dl#forums:active{width:81px;margin-left:18px;background:url("images/forums2.jpg") no-repeat;}

h3 dl#partenaires{width:127px;margin-left:18px;background:url("images/partenaires.jpg") no-repeat;}
h3 dl#partenaires:hover, h3 dl#partenaires:focus, h3 dl#partenaires:active{width:127px;margin-left:18px;background:url("images/partenaires2.jpg") no-repeat;}

h3 dd{margin-top:25px;display: none;height: 79px;width: 110px;position:relative;z-index:2;overflow: hidden;background-color:#CCEB21;}
h3 dd li{height: 25px;width: 110px;border-top: 1px solid #000000;text-align: center;}					
h3 dd li a{height:25px;width:110px;color:#FFFFFF;line-height:25px;text-decoration:none;display:block;}
h3 dd li a:hover, #menu li a:focus, #menu dt a:focus{color:#FFFFFF;background-color:#77D7FF;}

Et le HTML :

<h3>
			<dl id="guigro" onmouseover="javascript:montre('smenu1');">
				<a href="http://www.decoupe-fr.net">guigro</a>
				<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
					<ul>
						<li><a title="SSS" href="#">Coucou</a></li>
						<li><a title="" href="#">Sous-Menu 1.2</a></li>
						<li><a title="" href="#">Sous-Menu 1.3</a></li>
					</ul>
				</dd>
			</dl>
			<dl id="videos" onmouseover="javascript:montre('smenu2');">
				<a href="http://www.decoupe-fr.net">videos</a>
				<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
					<ul>
						<li><a title="SSS" href="#">Coucou</a></li>
						<li><a title="" href="#">Sous-Menu 1.2</a></li>
						<li><a title="" href="#">Sous-Menu 1.3</a></li>
					</ul>
				</dd>
			</dl>
			<dl id="portfolio" onmouseover="javascript:montre('smenu3');">
				<a href="http://www.decoupe-fr.net">portfolio</a>
				<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
					<ul>
						<li><a title="SSS" href="#">Coucou</a></li>
						<li><a title="" href="#">Sous-Menu 1.2</a></li>
						<li><a title="" href="#">Sous-Menu 1.3</a></li>
					</ul>
				</dd>
			</dl>
			<dl id="forums" onmouseover="javascript:montre('smenu4');">
				<a href="http://www.decoupe-fr.net">forums</a>
				<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
					<ul>
						<li><a title="SSS" href="#">Coucou</a></li>
						<li><a title="" href="#">Sous-Menu 1.2</a></li>
						<li><a title="" href="#">Sous-Menu 1.3</a></li>
					</ul>
				</dd>
			</dl>
			<dl id="partenaires" onmouseover="javascript:montre('smenu5');">
				<a href="http://www.decoupe-fr.net">partenaires</a>
				<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
					<ul>
						<li><a title="SSS" href="#">Coucou</a></li>
						<li><a title="" href="#">Sous-Menu 1.2</a></li>
						<li><a title="" href="#">Sous-Menu 1.3</a></li>
					</ul>
				</dd>
			</dl>
		</h3>

En vous remerciant,
Bonne journée
Guigro