Bonjour, j'ai le code suivant pour le menu
et j ai le css suivant:
Le problème étant quand je déroule mon menu déroulant, tout ce qui est en dessous se decale.
<?php
?>
<html>
<body>
<link href="menu.css" rel="stylesheet" type="text/css"/>
<div id="LoginForm">
<header>
<img id="banniere" src="image/banner.jpg" />
</header>
<div id="menuForme">
<div id="menu">
<ul>
<li><a href="#">Encoder une fiche</a>
<ul>
<li><a href="Fiche.php">Activités cccw</a></li>
<li><a href="FicheAideService.php">Aides services</a></li>
</ul>
</li>
<li><a href="fullcalendar-3.1.0/demos/locales.html">calendrier</a>
<li><a href="#">occupation</a>
<ul>
<li><a href="Planningjournalier.php">planning</a></li>
<li><a href="#">occupation cccw</a></li>
</ul>
</li>
<li><a href="#">Relevé</a>
<ul>
<li><a href="#">Relevé des benefices </a></li>
<li><a href="Releve.php">Relevées des activités</a></li>
</ul>
</li>
<li><a href="#">Administrateur</a>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
et j ai le css suivant:
body{
background-color:lemonchiffon;
}
#menu ul {
width:100%;
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
width:20%;
float:left;
margin:auto;
padding:0;
background-color:lightblue;
}
#menu li a {
display:block;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:red;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
z-index: 8;
}
#menu li:hover ul li {
float:none;
z-index: 8;
position:relative;
}
#menu li ul {
text-align:center;
z-index: 8;
}
footer{
position:absolute;
bottom: 0;
left: 0;
right: 0;
}
#connexion{
color: black;
float:right;
}
#banniere
{
margin-top:auto;
border-radius: 5px;
width:100%;
position: relative;
height: 100px;
}
#bienvenue{
float:right;
}
Le problème étant quand je déroule mon menu déroulant, tout ce qui est en dessous se decale.