Bonjour,
j'ai créé un menu en css appart pour l'intégré après dans ma page jusqu'au là il s'affichait correctement mais quand je le met dans ma page le sous menu ne descend pas, je ne sais pas pourquoi
voilà le code du menu :
code html:
le code css:
j'ai créé un menu en css appart pour l'intégré après dans ma page jusqu'au là il s'affichait correctement mais quand je le met dans ma page le sous menu ne descend pas, je ne sais pas pourquoi
voilà le code du menu :
code html:
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Accueil</b></a></li></ul>
<ul class="select"><li><a href="#"><b>L'école</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Présentation |</a></li>
<li><a href="#">L'équipe pédagogique</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Les formations</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Qualification |</a></li>
<li><a href="#">Technicienne |</a></li>
<li><a href="#">Par module |</a></li>
<li><a href="#">À distance</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Inscription</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Les tarifs</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Contact</b></a></li></ul>
</div>
</div>
le code css:
.nav {
height:48px;
background-color:#7E7E7E;
position:relative;
font-family:Calibri;
font-size:18px;
width:850px;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin-top:11px;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:37px;
float:left;
padding:0 36px 0 36px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#ffffff;
}
.nav .select a:hover,
.nav .select li:hover a {
background-color:#f00;
background-repeat:no-repeat;
padding:0 0 0 15px;
cursor:pointer;
color:#ffffff;
}
.nav .select a b{
font-weight:normal;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 36px 0 21px;
background:url(images/hover.png) right top;
background-repeat:no-repeat;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:48px;
background-color:#1d0625;
padding:0;
z-index:100;
left:0;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#ffffff;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#915f77;
}