28172 sujets

CSS et mise en forme, CSS3

Problème à la création d'un menu déroulant!!

Bonjour,
Je suis une débutante dans CSS, et malgré tout j'ai un projet de stage qui nécessite la création d'un site web dynamique.
Malheureusement, dans le cadre de la mise en page de mon site, j'ai pas pu insérer le menu déroulant de mon site. Les éléments de mon menu et les les sous éléments restent placer côte à côte.
J'arrive pas vraiment à régler ce problème et je reste toujours bloquée la-dessus.
J'espère que quelqu'un peut m'aider, je vous serai reconnaissante vraiment si vous acceptez à m'aider.

voilà ce que j'ai fait:
<header>
          <ul id="menu">
		<li>
		  <a href="#">menu</a></li>
		  <ul class="sousMenu">
			<li><a href="#">Création</a></li>
			<li><a href="#">sous menu</a></li>
			<li><a href="#">sous menu</a></li>
			<li><a href="#">sous menu</a></li>
			<li><a href="#">sous menu</a></li>
		        <li><a href="#">sous menu</a></li>
		</ul>
		</li>
		<li><a href="#">menu</a></li>
		<li><a href="#">menu</a></li>
		<li><a href="#">menu</a></li>
		<li><a href="#">menu</a></li>
		<li><a href="#">menu</a></li>
	</ul>
</header>

le code CSS:
header ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
header li {
	border-left: 2px solid none;
	border-right: 2px solid none;
	border-radius: 10px;
	float:left; /*pour IE*/
	border-left:1px solid green;
 }
header ul li a {
	border-radius: 10px;
	margin-right: 10px;
	display:block;
	float:left;   
	width:187px;
	line-height:30px; /*hauteur de l'image de fond*/
	background:green url('img/green_background.jpg') repeat-x;
	color:#DCDCDC;
	font-size: 0.84em;
	text-decoration:none;
	text-align:center;
 }
header ul li a:hover 
{
	border-radius: 10px;
	background:green url('img/green_background.jpg') repeat-x;
	opacity: 0.6;
	color:white;
}
header ul li ul li a
{
	border-radius: 10px;
	margin-right: 10px;
	display:block;
	float:left;   
	width:187px;
	line-height:30px; /*hauteur de l'image de fond*/
	background:green url('img/green_background.jpg') repeat-x;
	color:#DCDCDC;
	font-size: 0.84em;
	text-decoration:none;
	text-align:center;
}
header ul li a ul li a:hover
{
	border-radius: 10px;
	background:green url('img/green_background.jpg') repeat-x;
	opacity: 0.6;
	color:white;
	display: block;
	clear: both;
}

Merci d'avance.
Modifié par elkarima (21 Jul 2014 - 12:45)
Modérateur
J'ai pas regardé la css, mais le html comporte une erreur (</li> mal placé après <a href="#">menu</a>) :
<nav>
   <ul id="menu">
      <li>
      <a href="#">menu</a>
         <ul class="sousMenu">
            <li><a href="#">Création</a></li>
            <li><a href="#">sous menu</a></li>
            <li><a href="#">sous menu</a></li>
            <li><a href="#">sous menu</a></li>
            <li><a href="#">sous menu</a></li>
            <li><a href="#">sous menu</a></li>
        </ul>
      </li>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
   </ul>
</nav>

Il faudrait remplacer <header> par <nav> pour respecter la sémantique et modifier donc en conséquence les sélecteurs dans la css...
Modifié par jojaba (23 Jul 2014 - 22:18)
Sujet clos
Aller à