28172 sujets

CSS et mise en forme, CSS3

Pb Menu deroulant décalé sur IE8 , parfait sur Firefox...

Bonjour, je suis en 2eme année d'iut informatique et je dois faire un site internet.

J'ai fait un menu déroulant tout simple pour commencer.

1er PB: quand je passe la souris sur le menu le sous-menu s'affiche juste à coté du menu alors que sur FF il s'affiche parfaitement en dessous.

2eme PB: sur IE8 il y a un petit espace entre les 2 sous-menu qui me fait quitté le sous-menu quand je passe la souris dessus (pas ce pb sur FF ...).

voici la partit de mon code qui concerne le menu:
Html:

<div id=central>
    <ul id="menu">
    <li><a href="#" target="_self" title="Acceuil">Acceuil</a></li>
     <li><a href="#" target="_self" title="Consulter projets">Consulter projets</a></li>
	   <li><a href="#" target="_self" title="Fiches projets">Fiches projets</a> 
	    <ul>
              <li><a href="#">Modifier</a></li>
              <li><a href="#">supprimer</a></li>
        </ul></li>
	   <li><a href="#" target="_self" title="Administration">Administration</a></li>
     </ul>
	</div>


CSS:

#menu 
{
        font-weight : bold; 
        font-family : Arial; 
        font-size : 12px;
       
}

#menu, #menu ul{
        padding : 0; 
        margin : 0;
        list-style : none; 
        line-height : 21px; 
        text-align : center;
        float:none;
}


#menu a {  
        margin-left:auto; 
        margin-right: auto; 
        display : block; 
        padding : 0; 
        background : #8F8F8F;  
        color : #FF5500; 
        text-decoration : none; 
        width : 144px; 
}


#menu li
{
		float : left; 
        border-right: 1px solid transparent ; 
        margin-left:-1px;
        margin-top:3px;
}

#menu li ul 
{ 
       position: relative; 
       width: 100px;    
       display:none;		
	 margin:0px; 
 	padding: 0px;
 	/*top:72px;    
    left:549px;  */
  }

#menu li  
{     
        border-top : 1px solid #FF5500; 
}
#menu li ul li                
{
        border-top : 0px solid transparent; 
}


#menu li a {
 display:block;
 float:left;   
 width:190px;
 background-color:rgb(230,230,230);
 color:black;
 text-decoration:none;
 text-align:center;
 padding:0px;
 border:0px solid;
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }

#menu li a:hover {
 background-color:rgb(230,230,230);
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 color:#ff5500;
 } 
 
 #menu li:hover ul {
 display:block;
 }

#menu li:hover ul li {
 float:none;
 }

#menu {
 height:20px;
 }


si vous voyez des choses ahurissante n'hésitait pas à m'en faire part, je débute en création de site web.
Tu a utilisé quelle DOCTYPE ?
mon menu est dans un fichier php peut être que sa y joue ...
Bon apparemment c'est mon IE qui foire !
j'ai envoyé le lien a un collègue et tout s'affiche bien ^^
Sujet clos
Aller à