Menu horizontal avec sous menu)
kiki7
Messages postés
122
Statut
Membre
-
kiki7 Messages postés 122 Statut Membre -
kiki7 Messages postés 122 Statut Membre -
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>
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:
- Menu horizontal avec sous menu)
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu démarrer classique - Guide
- Windows 11 menu contextuel classique - Guide
- Menu démarrer - Guide
