J'ai peur que ce soit un peu long mais ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aldrea - Accueil</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<header align = "center">
<img src="images/banniere.png">
</header>
<!-- Menu deroulant -->
<aside>
<ul id="menuDeroulant">
<li>
<a href="#">Accueil</a>
</li>
<li>
<a href="#">Véhicule leger</a>
<ul class="sousMenu">
<li><a href="#">Moteur</a></li>
<li><a href="#">Chassis</a></li>
<li><a href="#">Visibilite</a></li>
<li><a href="#">Piece Asiatique</a></li>
<li><a href="#">Pneumatique</a></li>
</ul>
</li>
<li>
<a href="#">Véhicule utilitaire</a>
<ul class="sousMenu">
<li><a href="#">Moteur</a></li>
<li><a href="#">Chassis</a></li>
<li><a href="#">Visibilite</a></li>
<li><a href="#">Piece Asiatique</a></li>
<li><a href="#">Pneumatique</a></li>
</ul>
</li>
<li>
<a href="#">Poids lourd</a>
<ul class="sousMenu">
<li><a href="#">Moteur</a></li>
<li><a href="#">Chassis</a></li>
<li><a href="#">Visibilite</a></li>
<li><a href="#">Piece Asiatique</a></li>
<li><a href="#">Pneumatique</a></li>
</ul>
</li>
<li>
<a href="#">Industries</a>
<ul class="sousMenu">
<li><a href="#">Moteur</a></li>
<li><a href="#">Chassis</a></li>
<li><a href="#">Visibilite</a></li>
<li><a href="#">Piece Asiatique</a></li>
<li><a href="#">Pneumatique</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</aside>
<div id = "Cadre">
<h1>test</h1>
</body>
</html>
Et mon CSS
body
{
background: url(..//images/bg2.png) repeat;
font-family:"";
}
#header
{
width:804px;
height:218px;
}
header img
{
border-radius: 75px 100px 100px 0px;
}
#menuDeroulant
{
display : block;
width : 85%;
height: 21px;
text-align : center;
list-style-type: none;
margin:0%;
padding: 0;
border: 0;
position: absolute;
z-index: 1;
left: 13%;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0 ;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #565051;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("..//images/fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#Cadre{
width:95%;
min-height: 500px;
background : url(..//images/fond.png) repeat;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
border:1px solid #fff;
-webkit-box-shadow:0px 0px 30px RGBa(0,0,0,0.4);
-moz-box-shadow:0px 0px 30px RGBa(0,0,0,0.4);
-o-box-shadow:0px 0px 30px RGBa(0,0,0,0.4);
box-shadow:0px 0px 30px RGBa(0,0,0,0.4);
margin:25px auto;
position:relative;
-moz-opacity:0.98;
opacity:0.98;
filter:alpha(opacity=98);
}
) dans l'espoir que quelqu'un saurait m'aider ...
