bon personne pour m'aider sur ce topic mais j'ai pu trouver la soluce pour ceux que ça intéresse voici le code complet:
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>Le journal d'Audrey Arbion</title>
<link href="media/Mandala_Audrey.ico" rel="shortcut icon" type="image/gif" />
<link href="AA.css" rel="stylesheet" type="text/css" />
<!-- script du menu -->
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#menu1").hoverIntent(makeTall,makeShort);
var LImenu = document.getElementById("menu1");
var LIs = LImenu.getElementsByTagName("li");
var LIsCOUNT = LIs.length;
$MENUHEIGHT = (LIsCOUNT*30);
function makeTall(){ $("#menu li ul").animate({"height":$MENUHEIGHT},100);}
function makeShort(){ $("#menu li ul").animate({"height":0},100);}
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(50);$(this).fadeIn(600);});
}); // close document.ready
</script>
</head>
<body>
<div id="container">
<div id="banplusnav">
<ul id="menu">
<li><a href="intro.html" target="subframe">Introduction</a></li>
<li id="menu1"><a href="#">Le journal d'Audrey</a>
<ul>
<li class="fade"><a href="02-09-2005.html" target="subframe">02-09-2005</a></li>
<li class="fade"><a href="24-09-2005.html" target="subframe">24-09-2005</a></li><li class="fade"><a href="03-11-2005.html" target="subframe">03-11-2005</a></li></ul>
</li>
<li><a href="contact.html" target="subframe">Contact</a></li>
<li id="spacerli"> </li>
<li><a href="administration-login.php" target="subframe">administration (accès réservé)</a></li>
</ul>
</div>
<div id="iframediv"><iframe scrolling="auto" frameborder="0" src="intro.html" width="870" height="100%" name="subframe" id="subframe"></iframe></div>
</div>
<div id="containerbas">
</div>
</body>
</html>
CSS:
body {
background-color: #FFF;
margin: 0px;
}
#container {
background-attachment: fixed;
background-image: url(media/fondrepeat-y.gif);
background-repeat: repeat-y;
background-position: center top;
width: 880px;
margin-right: auto;
margin-left: auto;
}
#containerbas {
background-image: url(media/fondbas.gif);
background-repeat: no-repeat;
background-position: left top;
height: 5px;
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#banplusnav {
height: 130px;
width: 870px;
margin-top: 0px;
margin-left: 5px;
overflow: visible;
position: relative;
background-image: url(media/banniere.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#menu {
background-color: #360;
display: block;
height: 30px;
width: 870px;
margin-top: 100px;
margin-right: 0px;
margin-left: 0px;
position: absolute;
padding: 0px;
margin-bottom: 0px;
}
#menu li {
display: inline;
list-style-type: none;
margin-left: 0px;
float: left;
padding-right: 0px;
padding-left: 0px;
position: relative;
}
#menu li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
font-weight: bold;
color: #FFF;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}
#menu li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCC;
background-color: #090;
font-weight: bold;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
}
#menu li ul {
filter: progid:DXImageTransform.Microsoft.alpha(opacity=80);
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
display: block;
margin-top: 0px;
margin-left: 0px;
background-color: #360;
padding-left: 0px;
float: none;
position: absolute;
width: 133px;
overflow: hidden;
padding-top: 0px;
height: 0px;
z-index: 4;
}
#menu li ul li {
height: 30px;
margin-left: 0px;
list-style-type: none;
padding-left: 0px;
float: none;
position: relative;
display: block;
}
#menu li ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
font-weight: bold;
color: #FFF;
background-color: #360;
margin-left: 0px;
width: 100%;
padding-right: 150px;
padding-left: 10px;
}
#menu li ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
font-weight: bold;
color: #FFF;
background-color: #090;
margin-left: 0px;
width: 100%;
padding-top: 8px;
padding-right: 150px;
padding-bottom: 8px;
padding-left: 10px;
}
#menu #spacerli {
width: 380px;
height: 30px;
}
#iframediv {
height: 670px;
width: 870px;
margin-top: 0px;
margin-left: 5px;
position: relative;
}
.arial12noir {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
