Menu deroulant "horizontal"

**leFred** · 11/12/2008, 17h12

Bonjour et désolé si déja posté, mais je débute plutot en css et après une bonne quinzaine de jour de recherche je n'arrive pas à ce que je veux; en fait je voudrais faire ceci :

menu déroulant mais à la difference de ce menu qui est vertical, je le voudrais horizontal (on rollover en haut et les sous menu apparaissent en bas); j'ai essayé dans tous les sens de l'adapté mais je me mélange grandement les pinceaux entre les absolute, relative float...mon code est un conglomerat d'essai tous plus infructueux les uns que les autres mais au cas ou voila ou j'en suis actellement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<body>
<html>
<div id="menu"> 
   <ul class="niveau1"> 
      <li class="entete"><a href="menu 1">menu 1</a></li><li class="entete"><a href="menu 1">Menu 2</a></li>
          <ul class="niveau2"> 
          <li class="sousMenu"><a href="Sous menu 1.1">Sous menu 1.1</a></li> 
          <li class="sousMenu"><a href="Sous menu 2.2/">Sous menu 2.2</a></li> 
         </ul> 
      </li> 
 
   </ul> 
</div>	
</html>
</body>

et au niveau css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
	behavior: url(csshover.htc);
	margin: 0px auto;
	padding: 0px auto;
	font-size:8pt;
}
#menu{
	background-color: #99CCCC;
	width:750px;
	height:250px;
	padding-left:0px;
	margin: 0px auto;
	padding: 0px auto;
}
div#menu ul {padding:0;margin:0px;}
 
/*Entete*/
div#menu ul.niveau1 li.entete{
	float:left;width:100px;padding:0;margin:0px;border:1px solid;
	text-align:center;
	background:url(../images/Admin/greenGradientDown.png);
	}
 
/*Sous menu*/
div#menu  ul.niveau2 li{float:left;position:absolute;top:20px;display:block;background:yellow;}

mais c'est le bins; impossible de caler les sous menu correctement; bref je sature la !!!!

**leFred** · 11/12/2008, 17h40

Bon je viens de trouver un lien a etudier (mais demain la ras le bol !!)

et je vous tiens au jus !!!

http://css.developpez.com/tutoriels/liste-navigation/

Menu deroulant "horizontal"

CSS

Vue hybride

Discussions similaires

Partager

Partager