Menu horizontal avec sous menu)

Fermé
kiki7 Messages postés 119 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 - 12 sept. 2009 à 01:00
kiki7 Messages postés 119 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 - 15 sept. 2009 à 19:34
Bonsoir
J'ai un petit souci avec mon menu horizontal en particulier avec mes sous menu.
Je m'explique mon texte que je mets dans mes sous menu sont trop long et il ne s'affiche pas alors j'ai changé height (dd ul li a) : 36px la du coup ça marche je vois tout mais du tous mes sous menu sont agrandis. Comment puije faire afin que les sous menu d'adapte automatique à la longueur du texte.
J'espère que vous m'avez compris je ne suis pas très doué dans le css.
Cependnant je vous transmets le code du fichier style.css et du html

Lorsque je clic sur un des menus le sous menu passe en dessous du calque (layer) la je ne sais pas quoi faire
Une autre question je veux que lorsque je clic sur chaque menu je veux une couleur différente de chaque menu .est ce que ça avoir avec dt dans la feuille style.css?
Je sais que je pose beaucoup de questions j'ai essayé de le faire moi même mais la je coince



Je vous remercie d'avance
Aurevoir et à bientôt

CSS

body{
background:#FFFFFF;
}
#menu{
background:#FFFFFF;
height:20px;
position:relative;
font-family:verdana,ms sans serif,georgia,helvetica,arial;
font-size:10px;

}
#menu{
position:absolute;

}
dl{
height:20px;
margin:0; padding:1px;
display:block;
float:left;
font-family:verdana,ms sans serif,georgia,helvetica,arial;
font-size:10px;
}
dt{
width:150px;
display:block;
height:20px;
color:#000000;
line-height:20px;
text-align:center;
BORDER-TOP:#CCCCCC 1px solid;
BORDER-RIGHT:#CCCCCC 1px solid;
BORDER-BOTTOM:#CCCCCC 1px solid;
BORDER-LEFT:#CCCCCC 1px solid;
cursor:hand;
color:#000000;
}
dd{
display:block;
margin:auto;padding:auto;
background:#FFFFFF;
}
dd ul{
margin:0; padding:0 ;
text-align:center;
list-style:none;
}
dd ul li{
display:block;
margin:0; padding:0;
}
dd ul li a{
color:#000000;
display:block;
width:100%;
text-decoration:none;
width:150px;
height:36px;
list-style-type:none;
line-height:20px;
BORDER-TOP:#C0C0C0 1px solid;
BORDER-RIGHT:#C0C0C0 1px solid;
BORDER-BOTTOM:#C0C0C0 1px solid;
BORDER-LEFT:#C0C0C0 1px solid;
}
dd ul li a:hover{
background:#FFFFFF;
}
dl dd{
display:none;
}
dl:hover dd{
display:block;
}


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=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:1px;
top:0px;
width:1275px;
height:64px;
z-index:1;
border: thin solid #CCCCCC;
}
#Layer2 {
position:absolute;
left:71px;
top:152px;
width:1179px;
height:189px;
z-index:2;
border: medium solid #CCCCCC;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer2">gjlkjlfgjlkmjklmdjlkjglkgjfdskljgflkjglfkjlfkgdjlkfgjlkfdgjslkjdfgkljlkfgdj,;:v,bc,lckvjbfgn,klfjkbn,klfjgt,lkjdflmjg,;cx,v;:</div>

<div id="menu">
<dl>
<dt>rrrfrfrfrfr</dt>
<dd>
<ul>
<li><a href="#">Pfgdgfdgfddgf</a></li>
<li><a href="#">fdfgdgdfddf</a></li>
<li><a href="#">fgdfgdS</a></li>
<li><a href="#">fdgdfgdffd</a></li>
<li><a href="#">Lfgdddfgdf</a></li>
<li><a href="#">MOfdgfd gdfgdfdf</a></li>

</ul>
</dd>
</dl> <dl>
<dt>fdsfsf fdsf fsdfsd</dt>
<dd>
<ul>
<li><a href="#">cxvxcvxcv vcxcvxcvcx cvcvcv</a></li>
<li><a href="#">gdfgfd gfdg gfdf df </a></li>
<li><a href="#">dfgdfgdf gfgdfg gfdgfdgE</a></li>
<li><a href="#">fgfdgdfgd gfdgfdgdf</a></li>
<li><a href="#">ttt fgfdgdfgd gfdgdfg</a></li>
</ul>
</dd>
</dl> <dl>
<dt>dteeree eee eeee</dt>
<dd>
<ul>
<li><a href="#">fgdfgdgdfgd</a></li>
<li><a href="#">ggdfgdfgdg gfdgdfgd gfdgdfgdfgd</a></li>
<li><a href="#">fdfdsffds fdsfsdfsdfsd</a></li>
</ul>
</dd>
</dl> <dl>
<dt>ddsq dsqsqd dsqdqdq</dt>
<dd>
<ul>
<li><a href="#">aaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaa</a></li>
</ul>
</dd>
</dl> <dl>
<dt>sssssssssssss</dt>
<dd>
<ul>
<li><a href="#">yyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyy</a></li>
<li><a href="#">aaaaaa</a></li>
<li><a href="#">ssssssssss</a></li>
<li><a href="#">tttttttt</a></li>
<li><a href="#">kkkkkkkkkkkkkkkkk</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>ssssssssssssssss</dt>
<dd>
<ul>
<li><a href="#">ydfdfsfdsfsdfsfdsf</a></li>
<li><a href="#">yyyyyyyyy</a></li>
</ul>
</dd>
</dl> <dl>
<dt>fsdfsdfsd</dt>
<dd>
<ul>
<li><a href="#">fdsfdsfssfsdsdssd</a></li>
<li><a href="#">sdfsdfsdfsdff</a></li>
</ul>
</dd>
</dl> <dl>
<dt>dfdfdssdfd</dt>
<dd>
<ul>
<li><a href="#">tfsdfsdfsdfsdfsfsd</a></li>
<li><a href="#">sdfsdfsfdsssfdssdsd</a></li>
</ul>
</dd>
</dl>
</div>




<div id="Layer1"></div>
</body>
A voir également:

2 réponses

kiki7 Messages postés 119 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 6
14 sept. 2009 à 00:45
Bonsoir
J'ai vraiment besoin d'aide
S'il vous plait aidez moi
0
kiki7 Messages postés 119 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 6
15 sept. 2009 à 19:34
Personne pour m'aider
SVP
0