28172 sujets

CSS et mise en forme, CSS3

IE - Décalage barre de sous menu

Bonjour

J'ai un problème avec le css d'un menu avec IE que je n'arrive pas à résoudre
En gros j'ai un menu composé de deux barres. La barre du dessus pour les catégories principales, la seconde pour les sous catégories.
La barre de sous menu est tronquée de plus en plus au fur et à mesure de la navigation dans catégorie 1, 2, 3, 4, 5, 6.

Test en ligne :
http://www.lagence.ma/test/

Merci pour votre aide car je suis vraiment perdu !

code :

<html>
<head>
<title></title>
<STYLE type="text/css">
<!--
body {
	font-family: verdana, Tahoma, Helvetica, sans-serif;;
	font-size: 10px;
	color: #9f8871;
}
a {
	color: #9f8871;
}
div.wrapper {
	margin: auto;
	position: relative;
	width: 778px;
}
#mainbody-padding {
	background-color: #FFF;
	padding: 0 10px 0 10px;
}
.padding {
	background-color: #FFF;
}
#menuDeroulant {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
ul#menuDeroulant {
	height: 30px;
	background: #7c6f66;
}
#menuDeroulant li {
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	height: 30px;
	TEXT-TRANSFORM: uppercase;
}
#menuDeroulant .sousMenu {
	width: 100%;
	background-color: #a39588;
	position: absolute;
	top: 30px;
	left: 0;
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul#menuDeroulant ul.sousMenu li {
	height: 22px;
	TEXT-TRANSFORM: capitalize;
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	background-image: none;

}		
#menuDeroulant li a:link, #menuDeroulant li a:visited {
	display: block;
	height: auto;
	color: #FFF;
	float: left;
	margin: 0;
	padding: 9px 8px;
	text-decoration: none;
}
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
	padding: 4px 8px;
	background: #a39588;
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
}
ul#menuDeroulant li a.active {
		background: #7c6f66;
		color: #000;
}
#menuDeroulant li a:hover {
		background: #7c6f66;
}
ul#menuDeroulant ul.sousMenu li a:hover {
	background-image: none;
background: #a39588;
	color: #000;
}
#menuDeroulant li:hover > .sousMenu { display: block; z-index: 1; }
-->
</style>
</head>
<body>

 <div class="wrapper">
   <div id="mainbody-padding">
    <div class="padding">

<ul id="menuDeroulant">
 <li>
  <a href="index.html">Categorie 1</a>
  <ul class="sousMenu">
   <li><a href="">AAAAAAAAA</a></li>
   <li><a href="">BBBBBBBBB</a></li>
   <li><a href="">CCCCCCCCC</a></li>
  </ul>
 </li>
 <li>
 <a href="test2.html">Categorie 2</a>
  <ul class="sousMenu">
   <li><a href="">DDDDDDDDD</a></li>
   <li><a href="">EEEEEEEEE</a></li>
   <li><a href="">FFFFFFFFF</a></li>  
  </ul>
 </li>
 <li>
 <a href="test3.html">Categorie 3</a>
  <ul class="sousMenu">
   <li><a href="">GGGGGGGGG</a></li>
   <li><a href="">HHHHHHHHH</a></li>
   <li><a href="">IIIIIIIII</a></li>  
  </ul>
 </li>
 <li>
 <a href="test4.html">Categorie 4</a>
  <ul class="sousMenu">
   <li><a href="">JJJJJJJJJ</a></li>
   <li><a href="">KKKKKKKKK</a></li>
   <li><a href="">LLLLLLLLL</a></li>  
  </ul>
 </li>
 <li>
 <a href="test5.html">Categorie 5</a>
  <ul class="sousMenu">
   <li><a href="">MMMMMMMMM</a></li>
   <li><a href="">NNNNNNNNN</a></li>
   <li><a href="">OOOOOOOOO</a></li>
   <li><a href="">NNNNNNNNN</a></li>
   <li><a href="">OOOOOOOOO</a></li> 
  </ul>
 </li>
 <li>
 <a href="test6.html" class="active">Categorie 6</a>
  <ul class="sousMenu" style="display: block;">
   <li><a href="">PPPPPPPPP</a></li>
   <li><a href="">QQQQQQQQQ</a></li>
   <li><a href="">RRRRRRRRR</a></li> 
  </ul>
 </li>
</ul>


     </div>
    </div>
   </div>
 </body>
 </html>
Sujet clos
Aller à