28220 sujets

CSS et mise en forme, CSS3

Menu Deroulant Horiz CSS sous IE [Resolu]

Bonjour à tous,

J'ai un petit soucis avec mon menu (basé sur celui de Raphael) horizontal déroulant.
Sous firefox (comme d'habitude pas de problème) mais sous ie j'ai un décalage entre mes sous menu et je perds le "focus" javascript (le menu se referme).

Voici l'url www.strasmedia.com/menu.html

Ainsi que le code Html 

<div id=menu>
		<dl>
			<dt id=menu1 onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><a href="index.php">MENU 1</a></dt>
	  			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="content.php?rub=1">sous menu 1</a></li>
					<li><a href="content.php?rub=2">sous menu 2</a></li>
					<li><a href="content.php?rub=3">sous menu 3</a></li>
					<li><a href="content.php?rub=4">sous menu 4</a></li>
				</ul>
				</dd>
		</dl>
		<dl>			
			<dt id=menu2 onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"><a href="#">MENU 2</a></dt>
				<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="content.php?rub=5">Partners</a></li>
					<li><a href="content.php?rub=6">Departments</a></li>
					<li><a href="content.php?rub=7">Bios</a></li>
				</ul>
				</dd>
		</dl>
		<dl>	
		<dt id=menu3 onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"><a href="#">MENU 3</a></dt>
			<dd onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');" id="smenu3">
			<ul>
			  <li><a href="content.php?rub=8">Patents</a></li>
			  <li><a href="content.php?rub=9">Trademarks</a></li>
			  <li><a href="content.php?rub=10">Design Patents</a></li>
			  <li><a href="content.php?rub=11">Copyrights</a></li>
			  <li><a href="content.php?rub=12">Domain name</a></li>
			  <li><a href="content.php?rub=13">Other IP rights</a></li>
			</ul>
			</dd>
		</dl>
	
		<dl>
		<dt id=menu4 onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"><a href="#">MENU 4</a></dt>
			<dd onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');" id="smenu4">
			<ul>
				<li><a href="content.php?rub=14">Technical</a></li>
				<li><a href="content.php?rub=15">Marketing</a></li>
				<li><a href="content.php?rub=16">Financial</a></li>
				<li><a href="content.php?rub=17">Strategic</a></li>
			</ul>
			</dd>
		</dl>
		<dl>
		<dt id=menu5 onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"><a href="#">MENU 5</a></dt>
			<dd onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');" id="smenu5">
			<ul>
				<li><a href="content.php?rub=14">Technical</a></li>
				<li><a href="content.php?rub=15">Marketing</a></li>
				<li><a href="content.php?rub=16">Financial</a></li>
				<li><a href="content.php?rub=17">Strategic</a></li>
			</ul>
			</dd>
		</dl>
	</div>


et le css

/* CSS Document */
/* General */

body {
	margin: 5px;
	padding: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}
H1 {
	PADDING: 0px;
	MARGIN: 0px; 
	LINE-HEIGHT: 28px; 
}
H2 {
	PADDING: 0px;
	MARGIN: 0px; 
}
#all {
	PADDING: 0px;
	WIDTH: 944px;
	TEXT-ALIGN: left;
	margin: 0px auto;
	position: absolute;
	left: 50%;
	margin-left: -472px;
}
IMG {
	BORDER: 0px;
}
p {
margin: 0px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* Header */

/* Navigation */
#menu {
	height: 15px;
	width: 944px;
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 54px;
	background-image: url(img/fond_navig.gif);
	margin-top: 3px;
	z-index: 100;
	padding-top: 1px;
}
#menu dl {
	float: left;
	width: 186px;
}
dt#menu1, dt#menu2, dt#menu3, dt#menu4, dt#menu5 {
	cursor: pointer;
	text-align: center;
	font-size: 10px;
	color: #FFFFFF;
	display: block;
}
dt#menu1 a, dt#menu2 a, dt#menu3 a, dt#menu4 a, dt#menu5 a {
	color: #fff;
	text-decoration: none;
	display: block;
	font-weight: bold;
	background-color: #3B89B1;
}

#menu dd {
	border-right: 1px solid #1A376F;
	border-bottom: 1px solid #1A376F;
	border-left: 1px solid #1A376F;
}
#menu #smenu1 li, #menu smenu2 li, #menu #smenu3 li, #menu #smenu4 li, #menu #smenu5 li  {
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#menu #smenu1 li a, #menu #smenu2 li a, #menu #smenu3 li a, #menu #smenu4 li a, #menu #smenu5 li a {
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	padding-left: 3px;
	border-top: 1px solid #1A376F;
	color: #FFFFFF;
	font-size: 10px;
	background-color: #3B89B1;
}
#menu #smenu1 li a:hover, #menu #smenu2 li a:hover, #menu #smenu3 li a:hover, #menu #smenu4 li a:hover, #menu #smenu5 li a:hover {
	background-color: #3B89B1;
}


Une idée ? Cela fais 4 heures que je suis dessus et microsoft en a pris pour son grade Smiley smile

D'avance merci à tous
Modifié par Kalilu (12 May 2005 - 22:27)
Sujet clos
Aller à