Voilà, j'ai trouvé comment faire le sous menu, mais deux problèmes se posent :
-le sous menu apparait sur la même ligne que le menu, donc se superposent.
-voici le code changé (modifs en gras)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="shortcut icon" href="favicon.ico">
<SCRIPT language=javascript>
function OuvrirPopup(page,nom,option) {
PrivoxyWindowOpen(page,nom,option);
}
</SCRIPT>
[b]<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>[/b]
<title>arnauld</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("g_fixe.css");
</style>
<meta name="generator" content="Namo WebEditor v6.0">
<script language="JavaScript" src="pop-up.js"></script>
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="journal.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="formulaire.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="sketch.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css">
<link rel="stylesheet" href="g_fixe.css"></head>
<body>
<div id="conteneur">
<p><img src="imagetop.gif" width="525" height="233" border="0">
<img src="sketchintro.jpg" width="300" height="233" border="0"></p>
<p> </p>
<div id="gauche">
<ul class="menugauche">
<p>
<a href=javascript:popcontact('pop-up.htm')><font size="2"> </font></a></p>
<p>
<font size="2"> </font></p>
<p><a href=javascript:popcontact('pop-up.htm')><font size="2">popup webcam</font></a></p>
<a href="http://www.arnauld.fr/radioblog/index.php" onclick="PrivoxyWindowOpen(this.href, '_blank', 'resizable=yes, location=yes, toolbar=yes, scrollbars=auto, height=300, width=222'); return false;" title=""><font size="2">radio arnauld</font></a>
<font size="2">
</font> <p><form enctype="multipart/form-data" method="post" action="/cgi-bin/mailer">
<table border="0" width="310" cellpadding="0">
<tr>
<td align="left" width="200">
<p><input type="text" name="FROM" maxlength="35" size="32" value=" e mail pour newsletter"></p>
</td>
<td colspan="2" width="407" align="left"><input type="image" border="0" name="imageField" src="submit.gif" width="12" height="18">
</tr>
</table>
<input type="hidden" name="TO" value="webmaster@arnauld.fr">
<input type="hidden" name="SUBJECT" value="bonjour">
<input type="hidden" name="GOTOURL" value="http://www.arnauld.fr/journal1.htm">
</form></p>
</ul>
<img src="collage.JPG" width="217" height="280" border="0"><img src="numeriser0003a.gif" width="217" height="327" border="0"> </div>
<p align="center">
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www.arnauld.fr/journal1.htm" target="liens">
intro<a href="http://www.arnauld.fr/journal1.htm" target="liens"></a></li>
<li><a href="http://www.arnauld.fr/page1.htm" target="liens">
moi<a href="http://www.arnauld.fr/page1.htm" target="liens"></a></li>
<li><a href="http://www.arnauld.fr/mg2/index.php" target="liens">
photos<a href="http://www.arnauld.fr/mg2/index.php" target="liens"></a></li>
<li><a href="http://www.arnauld.fr/frenchgesture.htm" target="liens">
gesture<a href="http://www.arnauld.fr/frenchgesture.htm" target="liens"></a></li>
<li><a href="http://www.arnauld.fr/Lamour.swf" target="liens">
l'amour<a href="http://www.arnauld.fr/Lamour.swf" target="liens"></a></li>
<li><a href="http://www.arnauld.fr/blog/" target="liens">
blog<a href="http://www.arnauld.fr/blog/" target="liens"></a></li>
<li><a href="http://www.arnauld.fr/voyart.htm" target="liens">
voyages<a href="http://www.arnauld.fr/voyart.htm" target="liens"></a></li>
[b]<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-menu 1.1</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
</dl>
<dl>
</div>[/b]
<li><a href="http://www.arnauld.fr/forum/" target="liens">
forum<a href="http://www.arnauld.fr/forum/" target="liens"></a></li>
</ul>
</div>
</p>
<div id="centre"><iframe name="liens" width="625" height="760" align="middle" frameborder="0" src="intro.jpg" scrolling="auto">
</iframe>
</div>
-la css modifiée
#navlist
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#navlist a:hover { color: #000; }
#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}
.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}
Voilà, je cherche à faire apparaitre le sous menu en cascade sous l'élément du menu sélectionné au passage de la souris avec un effet onmouse out.
Merci de votre aide,
Arnob
Modifié par arnob (24 Jun 2005 - 16:36)
