Bonjour,
J'ai un problème avec un menu déroulant trouve sur un site. J'ai bidouillé le code pendant 2 petites heures mais je mélange tout...
Voici mon code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>Menu déroulant horizontal</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> <!-- 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"> <!-- /* CSS issu des tutoriels css.alsacreations.com */ body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; background-color:#737173 } #menu { position: absolute; top: 0; left: 0; z-index:100; width: 895px; height: 18px; font-weight: bold; text-decoration: none } #menu dl { float: left; width: 14em; background-color: #737173 } #menu dt { cursor: pointer; text-align: center; font-weight: bold; background-color: #737173 color:#FFFFFF } #menu dd { display: none; background-color:#FF0000 color:#FFFFFF } #menu li { text-align: center; background-color: #FF0000 font: 80% verdana, arial, sans-serif; font-size: 10px; } #menu li a { color: #000000; text-decoration: none; display: block; height: 100%; border: 0 none; background-color: #737173 } #menu dt a { color: #000000; background-color:#737173 text-decoration: none } #menu li a:hover { background: #737173; color:#FFFFFF } #menu dt a:hover { list-style-type: none; background-color:#FFFFFF color:#FFFFFF #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; background-color: #737173 } .mentions { position: absolute; top : 300px; left : 10px; color: #000; background-color: #737173 --> </style> </head> <body> <div id="menu"> <dl> <dt onmouseover="javascript:montre('smenu1');">Cotubel</dt> <dd id="smenu1"> <ul> <li><a href="#">Informations</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">Certificat</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Offres d’emploi</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="" title="Itinéraire">Itinéraire</a></dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');">Produits</dt> <dd id="smenu3"> <ul> <li><a href="#">Tubes soudés</a></li> <li><a href="#">Tubes sans soudure</a></li> <li><a href="#">Ebauches</a></li> <li><a href="#">Tubes carrés et rectangulaires</a></li> <li><a href="#">Raccords soudés et sans soudure</a></li> <li><a href="#">Brides</a></li> <li><a href="#">Raccords filetés BSP</a></li> <li><a href="#">Raccords à bague de sertissage</a></li> <li><a href="#">Raccords haute pression NPT & SW</a></li> <li><a href="#">Tubes alimentaires</a></li> <li><a href="#">Raccords alimentaires</a></li> <li><a href="#">Colliers de fixation</a></li> <li><a href="#">Vannes</a></li> <li><a href="#">Barres</a></li> <li><a href="#">Plats</a></li> <li><a href="#">Profils</a></li> <li><a href="#">Tôles</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="">Foires</a></dt> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="">Conditions de livraison</a></dt> </dl> </div> </body> </html>
J'ai réussi à modifier plusieurs trucs mais je débute dans le CSS et je ne trouve pas comment modifier le reste. Ce que je voudrais faire c'est que :
- "Itinéraire", "Foires" et "Conditions de livraison" ne soient pas soulignés, pourtant j'ai mis nul part qu'ils devaient l'être
- Les sous-menus de "Cotubel" et "Produits" soit écrits en blanc sur fond rouge #FF0000 mais là encore je ne trouve pas à quel endroit modifier le code.
Ca c'est une chose, et la deuxième, j'aimerais pouvoir régler la taille de chaque menu car j'ai dû agrandir la case pour pouvoir caser "Conditions de livraison" et évidemment toutes les cases se sont agrandies.
