28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant horizontal ne fonctionne pas

Re bonjour à tous,

Je suis en train de créer un site avec mon CV en ligne, et j'aimerais faire un menu déroulant (Ex : menu "CV français" et dès qu'on passe la souris dessus ça se déroule et affiche "Télachargez CV").

Voici le lien de mon site : /

J'ai utilisé ce tuto : Site du zéro

Mais comme vous pouvez le voir mes menus ne se déroulent pas...

Il doit y avoir un problème dans la feuille css mais je ne vois pas où, je débute et il y a des choses que je ne comprends pas encore Smiley lol

Merci beaucoup !!
Modifié par Alouce (18 Nov 2014 - 14:27)
Pardon oui !

<body>
<div id="siteLock"><div id="header"> <h2><a href="index.html" title="Accueil">CV trilingue Alice BEYEGUE</a></h2>
	<ul id="menu">
		<li>
			<a href="index.html">CV français</a>
			<ul>
				<li><a href="CVALICEPDF.pdf">Téléchargez CV français</a></li>
			</ul>
		</li>
		<li>
			<a href="index2.html">CV anglais</a>
			<ul>
				<li><a href="#">Téléchargez CV anglais</a></li>
			</ul>
		</li>
		<li>
			<a href="index3.html">CV espagnol</a>
			<ul>
				<li><a href="#">Téléchargez CV espagnol</a></li>
			</ul>
		</li>
		<li><a href="mailto:alice.beyegue@free.fr">Contact</a></li>
	</ul>
</div>



body
{
margin: 0;
padding: 5px;
background-image:url(images/background.png);
background-repeat: repeat-x;
text-align:center;
}
#siteLock
{
background: transparent;
margin: -5px auto 5px auto;
text-align: center;
padding: 0;
float: none;
position: relative;
height: auto;
width: 1000px;
clear: all;
}
#header
{
position: static;
width: 1050px;
padding: 0;
margin: 0;
color:#FFFFFF;
background-color:#bedef7;
}

/* MENU  LISTS */
#menu, #menu ul
{
        padding : 5px 0 5px 0;
        margin : 0;
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center;
		position: relative;
		background-color:#00a0ff;
		width: 1050px;
		display: block;
}

#menu
{
        font-weight : 300;
        font-family: Helvetica, Geneva, sans-serif;
        font-size : 15px;
		font-variant: small-caps;
		color:#FFFFFF;
}

#menu a
{
        display : block;
        padding : 0;
        background : #000; /* couleur de fond */        
        color : #fff;
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px;
}

#menu li
{ 
        float : left; 
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu li ul li
{
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

html>body #menu li ul li                
{
        border-top : 1px solid transparent;
Essaye ça en réglant les width à ta convenance :
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#menu li {
	float: left;
	margin: auto;
	padding: 0;
	background-color: black;
}
#menu li a {
	display: block;
	width: 100px;
	color: white;
	text-decoration: none;
	padding: 5px;
}
#menu ul ul li a {
	width: 200px;
}
#menu li a:hover {
	color: #FFD700;
}
#menu ul li ul {
	display: none;
}
#menu ul li:hover ul {
	display: block;
}
#menu li:hover ul li {
	float: none;
}
#menu li ul {
	position: absolute;
}
/*fix ie7*/
#menu {
	height: 50px;
}
Ça ne marche toujours pas malheureusement... Rien ne se déroule !

Il manque le javascript oui mais ce n'était pas que pour IE ?
Ça fonctionne avec ce code :
<div id="siteLock">
<div id="header">
  <h2><a href="index.html" title="Accueil">CV trilingue Alice BEYEGUE</a></h2>
  <div id="menu">
  <ul>
    <li> <a href="index.html">CV français</a>
      <ul>
        <li><a href="CVALICEPDF.pdf">Téléchargez CV français</a></li>
      </ul>
    </li>
    <li> <a href="index2.html">CV anglais</a>
      <ul>
        <li><a href="#">Téléchargez CV anglais</a></li>
      </ul>
    </li>
    <li> <a href="index3.html">CV espagnol</a>
      <ul>
        <li><a href="#">Téléchargez CV espagnol</a></li>
      </ul>
    </li>
    <li><a href="mailto:alice.beyegue@free.fr">Contact</a></li>
  </ul>
</div>
</div>
Génial merci ça fonctionne enfin ! Smiley lol

Sauf que maintenant le menu est tout concentré à gauche de ma page alors que j'aimerais qu'il soit tout le long.
J'ai essayé width:1045px mais quand je fais ça les titres du menu "CV français" "CV anglais" etc se mettent les uns en dessous des autres et plus en "inline-block"...

Je vous remets mon css:

#menu ul {
	margin: 0;
	padding : 0;
	list-style-type: none;
	text-align: center;
	display:block;
	position:relative;
	width:500px;
	font-variant: small-caps;
	font-family: Helvetica, Geneva, sans-serif;
	font-size : 15px;
	font-weight : 300;
}
#menu li {
	float: left;
	margin: auto;
	padding: 0;
	background-color: #00a0ff;
}
#menu li a {
	display: block;
	width: 100px;
	color: black;
	text-decoration: none;
	padding: 5px;
}
#menu ul ul li a {
	width: 200px;
}
#menu li a:hover {
	color: white;
}
#menu ul li ul {
	display: none;
}
#menu ul li:hover ul {
	display: block;
}
#menu li:hover ul li {
	float: none;
}
#menu li ul {
	position: absolute;
}
/*fix ie7*/
#menu {
	height: 50px;
}



Merci encore pour votre temps Smiley confused 
#menu ul {
	margin: 0;
	padding : 0;
	list-style-type: none;
	text-align: center;
	display:block;
	position:relative;
	width:auto;
	font-variant: small-caps;
	font-family: Helvetica, Geneva, sans-serif;
	font-size : 15px;
	font-weight : 300;
}
#menu li {
	float: left;
	margin: auto;
	padding: 0;
	background-color: #00a0ff;
	width:200px;
}
#menu li a {
	display: block;
	color: black;
	text-decoration: none;
	padding: 5px;
}
#menu ul ul li  {
	width: 200px;
}
#menu li a:hover {
	color: white;
}
#menu ul li ul {
	display: none;
}
#menu ul li:hover ul {
	display: block;
}
#menu li:hover ul li {
	float: none;
}
#menu li ul {
	position: absolute;
}
/*fix ie7*/
#menu {
	height: 50px;
}

Smiley smile
Sujet clos
Aller à