[Probleme] de menu vertical sous IE6

Question

lifecraft

12 Jul 2007 à 18:33

Bonjour à tous

Alors voila mon problème, je crée un menu vertical aligner sur la droite d'une div. Chaque item du menu est sensé s'ouvrir au passage de la souris. Sur Firefox ça passe nickel mais sur IE6 ca coince.

Voici tout le code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
	<div id="content">
    	<div id="top_acc">
        	<div id="menu">
            	<div id="menu_acc">
                	<ul id="nav_acc">
                    	<li><a href="./" id="menu_a">Accueil</a></li>
                	</ul>
                </div>
                <div id="menu_pao">
                    <ul id="nav_pao">
                        <li><a href="./pao/" id="menu_p">P.A.O</a></li>
                    </ul>
                </div>
                <div id="menu_video">
                	<ul id="nav_video">
                    	<li><a href="./video/" id="menu_v">Vid&eacute;o</a></li>
               		</ul>
                </div>
                <div id="menu_web">
                	<ul id="nav_web">
                    	<li><a href="./web/" id="menu_w">Web</a></li>
               		</ul>
            	</div>
            </div>        
        </div>
    </div>
</body>
</html>

et voici le CSS :

@charset "utf-8";
/* CSS Document */
body {
	background-color:#c0c0c0;
	margin:0;
	padding:0;
}

div#content {
	background-color:#FFFFFF;
	width:1007px;
	height:734px;
	border:#666666 1px solid;
	border-bottom:none;
	border-top:none;
	margin:0 auto 0 auto;
}

div#top_acc {
	background-color:#3366FF;
	background-position:top center;
	background-repeat:no-repeat;
	width:1007px;
	height:499px;
}

div#menu {
	margin-top:50px;
	float:right;
}


div#menu_acc {
	width: 25px;
}
ul#nav_acc {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul#nav_acc li {
	padding:3px 0 3px 0;
	clear:both;
}
ul#nav_acc a {
	text-decoration: none;
	display: block;
	width: 25px;
	text-indent: -9000px;
}
a#menu_a {
	background-image:url(http://forum.alsacreations.com/titre.gif);
	height: 23px;
	width: 25px;
}
a#menu_a:hover {
	height: 23px;
	width:80px;
	margin-left:-55px;
}

div#menu_pao {
	width: 25px;
}
ul#nav_pao {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul#nav_pao li {
	padding:3px 0 3px 0;
}
ul#nav_pao a {
	text-decoration: none;
	display: block;
	width: 25px;
	text-indent: -9000px;
}
a#menu_p {
	background-image:url(http://forum.alsacreations.com/titre.gif);
	height: 23px;
	width: 25px;
}
a#menu_p:hover {
	height: 23px;
	width:80px;
	margin-left:-55px;
}

div#menu_video {
	width: 25px;
}
ul#nav_video {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul#nav_video li {
	padding:3px 0 3px 0;
}
ul#nav_video a {
	text-decoration: none;
	display: block;
	width: 25px;
	text-indent: -9000px;
}
a#menu_v {
	background-image:url(http://forum.alsacreations.com/titre.gif);
	height: 23px;
	width: 25px;
}
a#menu_v:hover {
	height: 23px;
	width:80px;
	margin-left:-55px;
}


div#menu_web {
	width: 25px;
}
ul#nav_web {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul#nav_web li {
	padding:3px 0 3px 0;
}
ul#nav_web a {
	clear:both;
	text-decoration: none;
	display:block;
	text-indent: -9000px;
}
a#menu_w {
	background-image:url(http://forum.alsacreations.com/titre.gif);
	height: 23px;
	width: 25px;
}
a#menu_w:hover {
	height: 23px;
	width:80px;
	margin-left:-55px;
}

Merci de prendre le temps pour mon petit problème insoluble pour moi !

Sujet clos

CSS et mise en forme, CSS3

[Probleme] de menu vertical sous IE6