28172 sujets

CSS et mise en forme, CSS3

Problème de menu

Salut,

J'ai un gros problème de compatibilité sur un menu entre ie et les autres (jusque là ça parait "normal")...
En gros j'ai l'impression que la propriété display:block n'est pas vraiment bien interprétée, je tourne un peu (beaucoup) en rond... si vous avez des idées (une seule suffirait si c'est la bonne) je suis grandement preneur!!!!

Voilà le code css :



#menuconfiguration
{
	position : absolute;
	top : 60px;
	left : 30px;
	padding : 10px 10px 10px 10px;
	width : 860px;
	height : 50px;
	z-index : 2;
	background:#b4b4b4;
}

.containerMenuConf {
		position:absolute;
		top:0px;
		left:5px;
        width: 820px;
        padding: 15px;
        margin: 3px 0 20px 0;
		font-family: verdana, sans-serif;
        
        }


#navConf {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #000;
}

#navConf li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
	float:left;
}

ul#navConf li ul{
	position:absolute;
	margin: 0;
	padding: 0;
	display:none;
	top:35px;
	width:inherit;
	background-color:#898989;
	text-align:left;
	border: 1px solid #000;
	z-index:20;
}

ul#navConf li:hover ul{
	display:block;
	
}


#navConf a:link, #navConf a:visited {
        float: left;
        font-size: 12px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #FFFFFF;
}

#navConf a:link.active, #navConf a:visited.active, #navConf a:hover {
        color: #000;
}


et le menu en question : 


<div id="menuconfiguration">   
  <div class="containerMenuConf">
      <ul id="navConf">
            <li><a href="#">menu1</a>

                <ul>
                  <li><a href="#">menu1 sub 1</a></li>
                    <li><a href="#" >menu1 sub 2</a></li>
                    <li><a href="#" >menu1 sub 3</a></li>
                </ul>
            
            </li>
            <li><a href="#">menu2</a>
            
             <ul>
                  <li><a href="#">menu2 sub 1</a></li>
                    <li><a href="#">menu2 sub 2</a></li>
                    <li><a href="#">menu2 sub 3</a></li>
                </ul>
            
            </li>
            
            <li><a href="#">menu3</a>            
	             <ul>
              		<li><a href="#">menu3 sub1</a></li>
                    <li><a href="#">menu3 sub2</a></li>
                </ul>            
            </li>
            
            <li><a href="#">menu4</a>
            	<ul>
                  	<li><a href="#">menu4 sub 1</a></li>
                    <li><a href="#">menu4 sub 2</a></li>
                    <li><a href="#">menu4 sub 3</a></li>
                    <li><a href="#">menu4 sub 4</a></li>
                </ul>
            </li>
            
            <li><a href="#">menu5</a></li>
    </ul>
  </div>
    
    

</div>


Sous FF pas de problème, les sous items du menu sont bien alignés mais sou ie, il sont positionnés à gauche du parent...
Je me doute qu'il y a un truc a vois avez float:left mais j'ai pas trouvé jusqu'à maintenant.

Pour voir le phénomène

Merci à tous (au moins de m'avoir lu!).

Philippe
Modifié par philippe-l (23 Mar 2009 - 17:20)
je m'aperçois que je n'ai pas vraiment bien expliqué mon problème. En gros sur FF/Chrome/Opera mon sous menu en ligne s'affiche bien sous l'élément parent. Sous IE il se positionne à sa droite du coup la navigation est tout bonnement impossible....
Sujet clos
Aller à