bonjour,
je me fais mon premier site mais j'ai 2 problèmes au niveau de mon menu :
1) le texte situé en dessous se décale quand mon menu se déroule comment faire pour que le menu déroulant passe au dessus du texte ?
2)lorsqu'il se déroule il y a un décalage du sous menu avec son menu et une différence de largeur par rapport au menu que je n'arrive pas à corriger.
merci d'avance pour toute aide
HTML
CSS
je me fais mon premier site mais j'ai 2 problèmes au niveau de mon menu :
1) le texte situé en dessous se décale quand mon menu se déroule comment faire pour que le menu déroulant passe au dessus du texte ?
2)lorsqu'il se déroule il y a un décalage du sous menu avec son menu et une différence de largeur par rapport au menu que je n'arrive pas à corriger.
merci d'avance pour toute aide
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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" media="screen" type="text/css" href="Jball.css"/>
<title>Titre</title>
</head>
<body>
<div id="banniere" title="blabla"></div>
<div id="menu">
<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href ="3.html">3</a>
<ul>
<li><a href ="4.html">4</a></li>
<li><a href ="5.html">5</a></li>
</ul>
</li>
<li><a href ="6.html">6</a>
<ul>
<li><a href ="7.html">7</a></li>
<li><a href ="8.html">8</a></li>
</ul>
</li>
</ul>
</div>
<div id="corps">
<h1>Bienvenue sur le site</h1>
<p>corps du texte</p>
</div>
<div id="piedpage">
<p>pied de page</p>
</div>
</body>
</html>
CSS
body
{
background-color: black;
color: white;
}
/* Bannière */
#banniere
{
position: relative;
left: 50%;
padding:0;
width:550px;
height:225px;
margin-left:-275px;
margin-bottom:5px;
background: url('banniere.jpg');
}
/* Menu */
#menu ul
{
position: relative;
margin:0;
padding:0;
list-style-type:none;
text-align:center;
left: 50%;
margin-left:-220px;
}
#menu li
{
float:left;
margin:auto;
padding:0;
background-color:#375D81;
}
#menu li a
{
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover
{
color:#FFEFB6;
}
#menu ul li ul
{
display:none;
}
#menu ul li:hover ul
{
display:block;
}
#menu li:hover ul li
{
float:none;
}
/* corps */
#corps {
position: relative;
width: 900px;
height: 400px;
left: 50%;
margin-left:-450px;
margin-top:40px;
text-align:center;
}
/* pied de page */
#piedpage {
position: relative;
width: 900px;
height: 50px;
left: 50%;
margin-left:-450px;
text-align:center;
}