Bonjour,
J'espère que vous allez pouvoir m'aider. J'ai actuellement un soucis concernant un menu déroulant, je suis sûre qu'au final il suffit de rien mais je ne trouve pas la solution.
Vous pouvez voir en cliquant sur le lien ci dessus une image de mon menu
http://sd-4.archive-host.com/membres/up/147289722723184912/Capture4.JPG
Comme vous pouvez le voir j'ai un espace à gauche de chacun de mes Boutons Titres que je souhaiterai supprimer afin que tout mes boutons UL soient collés.
Je vous copie colle mon code HTML qui comprend mon CSS. (les liens et sous-menus ont été écrit pour donner du contenu au menu ils ne servent que d'exemples ;) )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold; width:962px; height:44px; background-color:#eb5413;}
#monmenu ul ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu ul.niveau2 {left: 0px; top: 22px;}
#monmenu ul.niveau3 {left: 124px; top: -1px;}
#monmenu li {list-style-type: none; position: relative; width: 120.25px; background-color: #eb5413; padding: 2px; margin: 0px; color:#FFF;}
#monmenu li:hover, #monmenu li.sfhover {background-color:#C00;}
#monmenu li a {text-decoration:none; color:#FFF}
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
#monmenu li.plus {border-bottom: 1px solid #B0B0B0;}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#monmenu li {width: 144px;}
</style>
<![endif]-->
<meta name="keywords"
content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
<meta name="description"
content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
<title>Exemple de menu hiérarchique en CSS</title>
</head>
<body>
<div id="monmenu">
<table style="border-collapse:collapse;" cellpadding="0" cellspacing="0">
<tr>
<td>
<ul class="niveau1">
<li> Micro Tracteur
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li> Accessoires </br> Micro Tracteur
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li> Motoculture
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li> Accessoires </br> Quad
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li> Transporteurs </br> Utilitaires
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li> Pièces </br> détachées
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li> Huile Graisse
<ul class="niveau2">
<li class="plus">
<a href= "http://www.rankspirit.com">
Extras
</a>
<ul class="niveau3">
<li>
<a href= "http://www.rankspirit.com">
Demander la note
</a>
</li>
<li>
<a href= "http://www.rankspirit.com">
Draguer la serveuse
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="niveau1">
<li>
<a href= "http://www.tracteur-occasion.com/boutique/adresse_e_mail.cfm?code_lg=lg_fr&ret=sommaire">
Votre Compte
</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
Je vous remercie pour vos réponses.
Bonne journée
Afficher la suite
