28172 sujets

CSS et mise en forme, CSS3

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:

<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&nbsp;&nbsp;&nbsp;&nbsp; |</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&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
		<li><a href="#">Technicienne&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
		<li><a href="#">Par module&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
		<li><a href="#">&Agrave; 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; 
}