28173 sujets

CSS et mise en forme, CSS3

Decalage de menu vertical sous IE6

Salut à tous,

J'avais envie de me lancer dans la creation d'un menu vertical en css. J'ai choisi d'utiliser le fichier csshover.htc pour rendre le tout compatible avec IE. Tous fonctionne nickel jusque au moment où je me decide de virer la bordure en bas des <li> (en supprimant border-bottom: 1px solid #CCC;) pour voir si cela serait pas plus joli, firefox reste impassible et affiche ce que je lui demande mais IE6 fait des siennes: Lorsque je positionne la souris sur le menu deroulant, il se produit un decalage entre le menu2 et le menu3 que je ne m'explique pas.

J'ai d'abord pensé aux differences de modeles de boites etc... entre IE et les autres mais mon Doctype m'a l'air correct.

J'ai resolu le truc en bricolant un Border de la couleur de mon fond mais ça fait justement un peu bricolage.

Aurais-je oublié quelques chose? quelqu'un pour m'expliquer les raisons de ce decalage?

Voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu vertical</title>
<style type="text/css">


body {background: #ffffff; behavior: url(csshover.htc);}

h1 {color: #000; margin-bottom: 0;}

div#nav {float: left; width: 7em; margin:0; background: #CCCCCC;}

div#nav ul {margin: 0; padding: 0; width: 7em; background: white;}

div#nav li {position: relative; list-style: none; margin: 0;


/*****************C EST ICI QUE CELA SE PASSE [smile]*********/

border-bottom: 1px solid #CCC;}

/**************************************************/


div#nav li:hover {background: #FF0000;}

div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}

div#nav>ul a {width: auto;}

div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}

div#nav ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;}


</style>


</head>

<body>

<h1>MENU VERTICAL</h1>

<div id="nav">
<ul class="niveau1">
 <li><a href="/">menu1</a></li>
 <li class="sousmenu"><a href="#">menu2 &gt;</a>
  <ul class="niveau2">
   <li><a href="#">sousmenu1</a></li>
   <li><a href="#">sousmenu2</a></li>
   <li><a href="#">sousmenu3</a></li>
   <li><a href="#">sousmenu4</a></li>
  </ul>
 </li>
 <li><a href="#">menu3</a></li>

 <li><a href=#">menu4</a></li>
</ul>
</div>


</body>
</html>


Merci pour votre aide.
Sujet clos
Aller à