Menu deroulant vertical
Fermé
king arthur
-
14 sept. 2007 à 19:36
mano2003 Messages postés 50 Date d'inscription vendredi 8 août 2008 Statut Membre Dernière intervention 24 novembre 2012 - 4 juil. 2009 à 19:49
mano2003 Messages postés 50 Date d'inscription vendredi 8 août 2008 Statut Membre Dernière intervention 24 novembre 2012 - 4 juil. 2009 à 19:49
A voir également:
- Menu deroulant vertical
- Menu déroulant excel - Guide
- Ps5 vertical - Guide
- Menu démarrer windows 11 - Guide
- Excel menu déroulant en cascade - Guide
- Canon quick menu - Télécharger - Utilitaires
3 réponses
kacy855
Messages postés
7
Date d'inscription
mardi 8 juillet 2008
Statut
Membre
Dernière intervention
10 juillet 2008
2
8 juil. 2008 à 17:11
8 juil. 2008 à 17:11
Tu peux t'inspirer en recopiant les codes
http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm
Mais tu peux d'abord essayer a faire un menu horizontale sans deroulement avec le site du zero
https://openclassrooms.com/fr/courses
http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm
Mais tu peux d'abord essayer a faire un menu horizontale sans deroulement avec le site du zero
https://openclassrooms.com/fr/courses
mano2003
Messages postés
50
Date d'inscription
vendredi 8 août 2008
Statut
Membre
Dernière intervention
24 novembre 2012
3
4 juil. 2009 à 19:49
4 juil. 2009 à 19:49
oui merci j'ai vu mais ca c'est au passage de la souris nous on nous demande de cliquer pour faire apparaitre le sous menu.
voici mon code html: c'est dans le menu annuaire que je veux créer des sous menus
<!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>malicklouisnoel.sn - Le site officiel de Malick Louis NOEL</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<style type="text/css">
/* Only Hack for IE */
#main, #page{ height:1%; }
.bg{ height:1000em; }
</style>
<![endif]-->
<div id="conteneur"><div id="header">
<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
codebase=http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=5,0,2,0
width=100%
height=100%>
<param name=movie value=speed.swf>
<param name=quality value=high>
<param name=BGCOLOR value=#000000>
<param name=SCALE value=showall>
<embed src=speed.swf
quality=high
pluginspage=https://get.adobe.com/flashplayer/ type=application/x-shockwave-flash
width=100%
height=100%
bgcolor=#000000
scale= showall>
</embed>
</object>
</div>
<!-- Colonne Gauche -->
<div id="left">
<div class="menuhaut">L'annuaire</div>
<ul class="menu">
<li><a href="bio.html">Ma biographie</a></li>
<li><a href="multimedia.html" title="Multimédia">Multimédia</a></li>
<li><a href="etudiants" title="Tutoriels et cours">Tutoriels</a></li>
<li><a href="outils.html" title="Outils">Outils</a></li>
<li><a href="actus" title="Actualité">Actualité</a></li>
<li><a href="https://www.sports.fr/" title="Actualité sportive">Sports</a></li>
<li><a href="http://www.humour-blague.com" title="Détente">Détente</a></li>
</ul> <div class="menubas"></div>
<div class="menuhaut">Recherches</div>
<div class="fondmenu"><br />
<form method="post" action="rechercher.php" id="search">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td> </td>
<td><table cellpadding="0" cellspacing="0">
<tr>
<td>
<input name="search" type="text" value="rechercher" size="18" />
</td>
</tr>
<tr>
<td align="center" valign="bottom"><input name="submit" type="submit" class="Button" value="Chercher" alt="Lancer la recherche!"/></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
</form><br /></div><div class="menubas"></div>
<div class="menuhaut">Liens Utiles</div>
<div class="fondmenu">
<div style="text-align:justify">
<ul class="menu">
<a href="https://www.esmt.sn/" title="ESMT"><img src="images/esmt.gif" width="135px" height="30px"></a>
<a href="http://www.esp.sn" title="ESP"><img src="images/esp.jpg" width="135px" height="30px">
<a href="http://www.examen.sn" title="Examens et concours"><img src="images/ex.gif" width="135px" height="30px">
<a href="https://www.seneweb.com/" title="Seneweb"><img src="images/demologo.gif" width="135px" height="30px">
<a href="https://www.msn.com/fr-fr/?redirfallthru=http%3a%2f%2fwww.msn.fr%2fimg%2ffr%2ffr-fr%2fdivertissement%2fcelebrites%2fgalery%2fwentworth02.jpg%3f" title="MSN"><img src="images/msn.gif" width="135px" height="30px">
</ul></div>
<div class="menubas"></div>
</div> </div>
<!-- Colonne Droite -->
<div id="right">
<div class="menuhaut">Espace membres</div>
<ul class="menu">
<form method="post" action="cible_formulaire.php">
<div align="center">
<input type="text" name="pseudo" id="pseudo" value="Votre Pseudo" tabindex="1" /><br />
<input type="password" name="password" id="password" tabindex="2" value="Votre mot de passe" size="10" maxlength="10" /> <br />
<input type="submit" name="log_in" id="connexion" tabindex="3" value="Connexion" size="5" maxlength="8"/> <br>
<label for="souvenir">Se souvenir de moi</label>
<input type="checkbox" name="souvenir" id="souvenir" /> <br />
</div>
<li><a href="#" title="">S'inscrire</a></li>
<li><a href="#" title="">Mot de passe perdu?</a></li>
</form>
</ul> <div class="menubas"></div>
<div class="menuhaut">Newsletter</div>
<div class="fondmenu"><br />
<form method="post" action="mail.php" id="mail">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td><table width="16%" cellpadding="0" cellspacing="0">
<tr>
<td>
<input name="search" type="text" value="Email" size="18"/>
</td>
</tr>
<tr>
<td align="center" valign="bottom"><input name="submit" type="submit" class="Button" value="Envoyer" alt="Lancer la recherche!"/></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
</form> <br /> </div><div class="menubas"></div>
<div class="menuhaut">A voir sur mon site</div>
<ul class="menu">
</div>
<div id="content"> <br /> <br />
<p>
<p>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="accueil.html">Accueil</a></li>
<li><a href="messagerie.html">Messagerie</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="waxsaxalaat.html">Wax Sa Xalaat</a></li>
<li><a href="deconnexion.html">Déconnexion</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<p><h1><i><em><b>MON PREMIER SITE WEB.(En construction...)</b></em><i></h1> <!--Titre de mon site-->
<p>
Bonjour, bienvenue sur le site officiel de Malick Louis NOEL créé le samedi 16 mai 2009.
<br>Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai de vous proposer...
<br>En attendant, vous trouverez quelques conseils susceptibles de vous aider et j'espère que vous adorerez le design de mon site.
même si ce n'est pas encore digne d'un webmaster mais je vous promet qu'il sera bien entretenu et mis a jour régulièrement et que
bientôt, il deviendra super beau (comme moi mdr!!!) et pleins d'informations et de rubriques.
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tous les internautes mais plus particulièrement aux étudiants en télématique, aux férus du ballon rond et notamment aux supporters
de l'Olympique de MARSEILLE (mon club). Mais si je commence à privilégier certaines personnes, on va m'accuser de discrimination,
donc je ferais de mon mieux pour satisfaire tout le monde.
</p>
<h2>L'auteur</h2>
<p align="center"><img src="images/moi.jpg" alt="Moi" align="middle" width="120px" height="100px" border="2px ridge"/><br><br></p>
<p>
L'auteur de ce site? Bah, c'est moi Malick Louis NOEL, quelle question!!!<br />
Je suis né un Jeudi, 20 mars 1986 à Kaolack (mais je me rappelles pas de l'heure de ma naissance lol!!!).<br />
Je suis étudiant en 1<sup>ère</sup> année de Téléinformatique à l'Ecole Supérieure Multinationale des Télécommunications qui est en partenariat
avec l'Ecole Supérieure Polytechnique de Dakar pour cette formation et je suis dans une classe très "nekh" mais surtout travailleuse et
y'a toujours la bonne humeur dans cette classe grâce aux gars cool qui y sont. Je vous en présenterai quelques uns (les dormeurs mdr!!!).
</p>
</div>
<div id="bgleft" class="bg left"></div>
<div id="bgright" class="bg right"></div>
<div id="bgcentre" class="bg centre"></div>
<div id="pied" ><div class="footer">
<a href="#">A propos</a> |
<a href="#">Contact</a> |
<a href="#">Plan du site</a> |
<a href="#">Partenaires</a> |
</div></div></div>
</div></div>
</body>
</html>
et voici mon code css:
body {margin:0;padding:0;background-image: url(images/fond.jpg);}
#conteneur { margin: 0 auto 0;position:relative;width:1024px;background-color:#000000;padding:0; text-align:justify}
#header {margin: 0 auto 0;width:1024px;height:174px;background: url(images/header.bmp) no-repeat top;padding:0}
/*Hauteur des div*/
.bg {position:absolute;bottom:0;height:100%;}
#bgleft {left:0;width:150px;background-color:#222933;}
#bgright {right:0;width:150px;background-color:#222933;}
#bgcentre {margin-left: 150px;margin-right: 150px;width:724px;background-color:#222933;}
#content, #left, #right, #header, #footer, #centre {position:relative;z-index:2;}
#sous_menu{margin:5px 0 0 0;padding:0;width:150px;font: 10px/24px Verdana;text-decoration: none;list-style: none;}
.menuhaut {margin:5px 0 0 0;padding:0;width:150px;font: 10px/24px Verdana;text-decoration: none;list-style: none;background:url(images/menuhaut.jpg);height:32px;text-align:center;color:#fff;font-weight : bolder;}
ul.menu {margin:0 0 0 0;padding:0;width:150px;text-decoration: none;background:url(images/menufond.jpg)}
ul.menu li {border-bottom: 1px solid #6fac1c;margin:0 0 0 8px;padding:0;list-style-type: none;font-family: verdana ; font-size: 8pt ;padding:0 0 0 2px;width:130px;}
ul.menu li a {color: #fff;height:15px;text-decoration: none;width:150px;margin:0 0 0 0; line-height:15px;outline:none}
ul.menu li a:hover {color: #6fac1c;height: 15px;text-decoration: none;width:150px;margin:0 0 0 0;line-height:15px}
.menubas {margin:0;padding:0;width:150px;background:url(images/menubas.jpg);height:19px;}
p {margin:0 0 0 0;padding:0;font-family: verdana ; font-size: 10pt;color:#fff; line-height:10pt}
.fondmenu {margin:0 0 0 0;padding:0;width:150px;text-decoration: none;background:url(images/menufond.jpg);font: 10px/24px Verdana}
table, td, tr, img, form { margin:0 auto 0; padding:0 ; border :0}
input { WIDTH: 120px ;margin:0 0 0;padding:0;}
ul.slogan {margin:24px 0 0 0;padding:0;width:230px;text-decoration: none;position:absolute;right:0}
ul.slogan li {color: #5b9f04;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;}
ul.slogan a {color: #5b9f04;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;outline:none}
ul.slogan a:hover {color: #758cb0;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;}
#vert a {color: #2c496b;}
#vert a:hover {color: #5b9f04;}
#navcontainer {
background: #036;
border-top: 1px solid steelblue;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}
html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}
#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}
#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}
#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
/*Pied et copyright*/
.footer {position:absolute;color:#fff;padding:0;width:700px;height:15px;font: 9px/12px Verdana;margin: 3px 0 0 0;}
.footer a {margin: 0 0 0 0;padding: 0;color:#fff;outline:none;text-decoration: none;}
.footer a:hover {margin: 0;padding: 0;color:#2c496b;text-decoration: none;}
a.copyright {position:absolute;bottom:0;width:200px;height:10px;right:5px;outline:none;}
#pied {width:1024px;height:20px ;position:relative;margin: 0 auto 0 ;background-color:#88e539;clear: both;}
#left {width: 150px;float: left;color:#fff;}
#right {width: 150px;float: right;}
#content {margin-left: 155px;margin-right: 155px;top:0;font-family: verdana ; font-size: 10pt;color:#fff; line-height:10pt}
voici mon code html: c'est dans le menu annuaire que je veux créer des sous menus
<!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>malicklouisnoel.sn - Le site officiel de Malick Louis NOEL</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<style type="text/css">
/* Only Hack for IE */
#main, #page{ height:1%; }
.bg{ height:1000em; }
</style>
<![endif]-->
<div id="conteneur"><div id="header">
<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
codebase=http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=5,0,2,0
width=100%
height=100%>
<param name=movie value=speed.swf>
<param name=quality value=high>
<param name=BGCOLOR value=#000000>
<param name=SCALE value=showall>
<embed src=speed.swf
quality=high
pluginspage=https://get.adobe.com/flashplayer/ type=application/x-shockwave-flash
width=100%
height=100%
bgcolor=#000000
scale= showall>
</embed>
</object>
</div>
<!-- Colonne Gauche -->
<div id="left">
<div class="menuhaut">L'annuaire</div>
<ul class="menu">
<li><a href="bio.html">Ma biographie</a></li>
<li><a href="multimedia.html" title="Multimédia">Multimédia</a></li>
<li><a href="etudiants" title="Tutoriels et cours">Tutoriels</a></li>
<li><a href="outils.html" title="Outils">Outils</a></li>
<li><a href="actus" title="Actualité">Actualité</a></li>
<li><a href="https://www.sports.fr/" title="Actualité sportive">Sports</a></li>
<li><a href="http://www.humour-blague.com" title="Détente">Détente</a></li>
</ul> <div class="menubas"></div>
<div class="menuhaut">Recherches</div>
<div class="fondmenu"><br />
<form method="post" action="rechercher.php" id="search">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td> </td>
<td><table cellpadding="0" cellspacing="0">
<tr>
<td>
<input name="search" type="text" value="rechercher" size="18" />
</td>
</tr>
<tr>
<td align="center" valign="bottom"><input name="submit" type="submit" class="Button" value="Chercher" alt="Lancer la recherche!"/></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
</form><br /></div><div class="menubas"></div>
<div class="menuhaut">Liens Utiles</div>
<div class="fondmenu">
<div style="text-align:justify">
<ul class="menu">
<a href="https://www.esmt.sn/" title="ESMT"><img src="images/esmt.gif" width="135px" height="30px"></a>
<a href="http://www.esp.sn" title="ESP"><img src="images/esp.jpg" width="135px" height="30px">
<a href="http://www.examen.sn" title="Examens et concours"><img src="images/ex.gif" width="135px" height="30px">
<a href="https://www.seneweb.com/" title="Seneweb"><img src="images/demologo.gif" width="135px" height="30px">
<a href="https://www.msn.com/fr-fr/?redirfallthru=http%3a%2f%2fwww.msn.fr%2fimg%2ffr%2ffr-fr%2fdivertissement%2fcelebrites%2fgalery%2fwentworth02.jpg%3f" title="MSN"><img src="images/msn.gif" width="135px" height="30px">
</ul></div>
<div class="menubas"></div>
</div> </div>
<!-- Colonne Droite -->
<div id="right">
<div class="menuhaut">Espace membres</div>
<ul class="menu">
<form method="post" action="cible_formulaire.php">
<div align="center">
<input type="text" name="pseudo" id="pseudo" value="Votre Pseudo" tabindex="1" /><br />
<input type="password" name="password" id="password" tabindex="2" value="Votre mot de passe" size="10" maxlength="10" /> <br />
<input type="submit" name="log_in" id="connexion" tabindex="3" value="Connexion" size="5" maxlength="8"/> <br>
<label for="souvenir">Se souvenir de moi</label>
<input type="checkbox" name="souvenir" id="souvenir" /> <br />
</div>
<li><a href="#" title="">S'inscrire</a></li>
<li><a href="#" title="">Mot de passe perdu?</a></li>
</form>
</ul> <div class="menubas"></div>
<div class="menuhaut">Newsletter</div>
<div class="fondmenu"><br />
<form method="post" action="mail.php" id="mail">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td><table width="16%" cellpadding="0" cellspacing="0">
<tr>
<td>
<input name="search" type="text" value="Email" size="18"/>
</td>
</tr>
<tr>
<td align="center" valign="bottom"><input name="submit" type="submit" class="Button" value="Envoyer" alt="Lancer la recherche!"/></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
</form> <br /> </div><div class="menubas"></div>
<div class="menuhaut">A voir sur mon site</div>
<ul class="menu">
</div>
<div id="content"> <br /> <br />
<p>
<p>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="accueil.html">Accueil</a></li>
<li><a href="messagerie.html">Messagerie</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="waxsaxalaat.html">Wax Sa Xalaat</a></li>
<li><a href="deconnexion.html">Déconnexion</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<p><h1><i><em><b>MON PREMIER SITE WEB.(En construction...)</b></em><i></h1> <!--Titre de mon site-->
<p>
Bonjour, bienvenue sur le site officiel de Malick Louis NOEL créé le samedi 16 mai 2009.
<br>Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai de vous proposer...
<br>En attendant, vous trouverez quelques conseils susceptibles de vous aider et j'espère que vous adorerez le design de mon site.
même si ce n'est pas encore digne d'un webmaster mais je vous promet qu'il sera bien entretenu et mis a jour régulièrement et que
bientôt, il deviendra super beau (comme moi mdr!!!) et pleins d'informations et de rubriques.
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tous les internautes mais plus particulièrement aux étudiants en télématique, aux férus du ballon rond et notamment aux supporters
de l'Olympique de MARSEILLE (mon club). Mais si je commence à privilégier certaines personnes, on va m'accuser de discrimination,
donc je ferais de mon mieux pour satisfaire tout le monde.
</p>
<h2>L'auteur</h2>
<p align="center"><img src="images/moi.jpg" alt="Moi" align="middle" width="120px" height="100px" border="2px ridge"/><br><br></p>
<p>
L'auteur de ce site? Bah, c'est moi Malick Louis NOEL, quelle question!!!<br />
Je suis né un Jeudi, 20 mars 1986 à Kaolack (mais je me rappelles pas de l'heure de ma naissance lol!!!).<br />
Je suis étudiant en 1<sup>ère</sup> année de Téléinformatique à l'Ecole Supérieure Multinationale des Télécommunications qui est en partenariat
avec l'Ecole Supérieure Polytechnique de Dakar pour cette formation et je suis dans une classe très "nekh" mais surtout travailleuse et
y'a toujours la bonne humeur dans cette classe grâce aux gars cool qui y sont. Je vous en présenterai quelques uns (les dormeurs mdr!!!).
</p>
</div>
<div id="bgleft" class="bg left"></div>
<div id="bgright" class="bg right"></div>
<div id="bgcentre" class="bg centre"></div>
<div id="pied" ><div class="footer">
<a href="#">A propos</a> |
<a href="#">Contact</a> |
<a href="#">Plan du site</a> |
<a href="#">Partenaires</a> |
</div></div></div>
</div></div>
</body>
</html>
et voici mon code css:
body {margin:0;padding:0;background-image: url(images/fond.jpg);}
#conteneur { margin: 0 auto 0;position:relative;width:1024px;background-color:#000000;padding:0; text-align:justify}
#header {margin: 0 auto 0;width:1024px;height:174px;background: url(images/header.bmp) no-repeat top;padding:0}
/*Hauteur des div*/
.bg {position:absolute;bottom:0;height:100%;}
#bgleft {left:0;width:150px;background-color:#222933;}
#bgright {right:0;width:150px;background-color:#222933;}
#bgcentre {margin-left: 150px;margin-right: 150px;width:724px;background-color:#222933;}
#content, #left, #right, #header, #footer, #centre {position:relative;z-index:2;}
#sous_menu{margin:5px 0 0 0;padding:0;width:150px;font: 10px/24px Verdana;text-decoration: none;list-style: none;}
.menuhaut {margin:5px 0 0 0;padding:0;width:150px;font: 10px/24px Verdana;text-decoration: none;list-style: none;background:url(images/menuhaut.jpg);height:32px;text-align:center;color:#fff;font-weight : bolder;}
ul.menu {margin:0 0 0 0;padding:0;width:150px;text-decoration: none;background:url(images/menufond.jpg)}
ul.menu li {border-bottom: 1px solid #6fac1c;margin:0 0 0 8px;padding:0;list-style-type: none;font-family: verdana ; font-size: 8pt ;padding:0 0 0 2px;width:130px;}
ul.menu li a {color: #fff;height:15px;text-decoration: none;width:150px;margin:0 0 0 0; line-height:15px;outline:none}
ul.menu li a:hover {color: #6fac1c;height: 15px;text-decoration: none;width:150px;margin:0 0 0 0;line-height:15px}
.menubas {margin:0;padding:0;width:150px;background:url(images/menubas.jpg);height:19px;}
p {margin:0 0 0 0;padding:0;font-family: verdana ; font-size: 10pt;color:#fff; line-height:10pt}
.fondmenu {margin:0 0 0 0;padding:0;width:150px;text-decoration: none;background:url(images/menufond.jpg);font: 10px/24px Verdana}
table, td, tr, img, form { margin:0 auto 0; padding:0 ; border :0}
input { WIDTH: 120px ;margin:0 0 0;padding:0;}
ul.slogan {margin:24px 0 0 0;padding:0;width:230px;text-decoration: none;position:absolute;right:0}
ul.slogan li {color: #5b9f04;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;}
ul.slogan a {color: #5b9f04;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;outline:none}
ul.slogan a:hover {color: #758cb0;height: 40px;font-family: verdana ; font-size: 12pt ;margin:0;padding:0;list-style-type: none;text-decoration: none;font-weight : bolder;}
#vert a {color: #2c496b;}
#vert a:hover {color: #5b9f04;}
#navcontainer {
background: #036;
border-top: 1px solid steelblue;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}
html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}
#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}
#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}
#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
/*Pied et copyright*/
.footer {position:absolute;color:#fff;padding:0;width:700px;height:15px;font: 9px/12px Verdana;margin: 3px 0 0 0;}
.footer a {margin: 0 0 0 0;padding: 0;color:#fff;outline:none;text-decoration: none;}
.footer a:hover {margin: 0;padding: 0;color:#2c496b;text-decoration: none;}
a.copyright {position:absolute;bottom:0;width:200px;height:10px;right:5px;outline:none;}
#pied {width:1024px;height:20px ;position:relative;margin: 0 auto 0 ;background-color:#88e539;clear: both;}
#left {width: 150px;float: left;color:#fff;}
#right {width: 150px;float: right;}
#content {margin-left: 155px;margin-right: 155px;top:0;font-family: verdana ; font-size: 10pt;color:#fff; line-height:10pt}
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
14 sept. 2007 à 19:42
14 sept. 2007 à 19:42
SALUT
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
RAD
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
RAD
