5546 sujets

Sémantique web et HTML

Menu déroulant html css

Bonjour,

j'ai besoin d'aide pour adapter plusieurs codes que j'ai trouvé sur internet. Je n'y connais pas grand chose en HTML et CSS ce pourquoi je souhaite tomber sur une âme charitable qui pourrait m'aiguiller.

Mon but est de créer un menu déroulant sous ce que j'ai déjà effectué. Celui que j'ai ne fonctionne pas et je ne vois pas pourquoi.

Il ne sert à rien de m'envoyer vers différents liens ou tutoriaux, je m'y suis arraché les cheveux tout l'après midi et une bonne parti de la soirée, je n'arrive pas à adapter.

Merci par avance pour votre aide


HTML

<code>

<div id="menu">

<li class="current"><a href="#">Accueil</a></li>
<li><a href="#">Qui sommes nous ?</a></li>
<gras><ul class="menuderoulant">
<li><a href="#2">sous menu a</a></li>
<li><a href="#3">sous menu b</a></li>
<li><a href="#4">sous menu c</a></li>
</ul></gras>
<li><a href="#">Circuits</a></li>
<li><a href="#">L'Inde du sud</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>

</div>

</code>

CSS

<code>

#menu {
list-style-type: none;
border-top:#fff solid 5px;
background-color:#000033;
width:1000px; height:35px;
}

#menu li {
float:left;
left: 30px;
}

#menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin-top:3px;
border-right: 10px solid #000033;
border-left: 10px solid #000033;
cursor:pointer;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
}

#menu li a:hover {
background-color:#98869c;
}

#menu li.current a {
background-color:#77b800;
}

#menu .menuderoulant
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position:absolute;
}
#menu .menuderoulant li
{
margin: 0;
padding: 0;
border: 0;
width: 140px;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menu .menuderoulant li a:hover
{
background-color: #eab;
}

#menu .menuderoulant li a:visited {
background-color: #9933CC;
}

#menu li:hover > .menuderoulant { display: block; }

</code>
Bonjour,

merci pour ta réponse mais du coup je me suis rabattu sur un autre code vu que je n'y arrive pas du tout.

C'est beaucoup moins joli mais il y a un semblant de fonctionnement.

J'espère pouvoir revenir dessus avant la fin de mon site.

Encore merci.

Pour info dès que je colle du <ul> il me place de point hors je mets bien la formule qui les efface et me déplace tout à partir du sous menu sans me le faire disparaître alors j'ai bien mis le "display:none;"

Une journée complète que je suis dessus, là je baisse les bras ou je vais vers l'AVC
Bonjour,

finalement je n'ai pas laché le truc et ça fonctionne mais maintenant j'ai un autre soucis.

je n'arrive pas mettre le sous menu en colonne et centré sous le menu "circuit"

Auriez vous une solution

Merci par avance

-------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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titre</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css2.css" rel="stylesheet" type="text/css" /><body>
<div id="block">
<div id="haut">

</div>

<div id="photo">
<div id="logo">
<img src="images/logo.gif" alt="logo" />
</div>
<div id="texthaut">
<div class="titrea">
  <p>CIRCUITS SUR MESURE</pr>
  </div>
</div>
</div>

<ul id="menu"> 

<li class="current"><a href="#">Accueil</a></li> 
<li><a href="#">Qui sommes nous ?</a></li> 
<li><a href="#">Circuits</a>
<ul class="menuderoulant"> 
<li><a href="#2">sous menu a</a></li> 
<li><a href="#3">sous menu b</a></li> 
<li><a href="#4">sous menu c</a></li>	
</ul> </li> 
<li><a href="#">L'Inde du sud</a></li> 
<li><a href="#">Photos</a></li> 
<li><a href="#">Contact</a></li> 

</ul>

</div>
</body>
</html>


-----css------

#menu {
	list-style-type: none;
	background-color:#000033;
	width:959px;
	height: 34px;
	display: block;
  }

#menu li {
	float:left;
	left: 0px;
}

#menu li a {
	display:block;
	color:#fff;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
	margin-top: 3px;
  }

#menu li a:hover {
	background-color:#FF9900;
  }
  
#menu li.current a { 
  background-color:#77b800;
  }

#menu .menuderoulant      
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position:absolute;
	background-color: #CCCCCC;
}
#menu .menuderoulant li
{
margin: 0;
padding: 0;
border: 0;
width: 140px;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menu .menuderoulant li a:hover
{
	background-color: #FFCC33;
}

#menu .menuderoulant li a:visited {
background-color: #9933CC;
}

#menu li:hover > .menuderoulant { display: block; }
Sujet clos
Aller à