Problème de menu déroulant
Résolu
le-tux
Messages postés
263
Date d'inscription
Statut
Membre
Dernière intervention
-
le-tux Messages postés 263 Date d'inscription Statut Membre Dernière intervention -
le-tux Messages postés 263 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je viens de mettre en place des sous menus à mes onglet en haut de mon blog. Le souci c'est qu'il sont constamment visibles. j'aimerais les faire dérouler au passage de la souris, mais je ne sais pas quoi modifier dans le Css.
Merci d'avance pour votre aide.
Voici mon blog : http://tounovoyages.blogspot.com/
Voici mon code Css :
Merci d'avance pour votre aide.
Voici mon blog : http://tounovoyages.blogspot.com/
Voici mon code Css :
*{
margin:0;
padding:0;
}
#menu{
margin:20px 0 0 50px;
background:#0f0;
color:#fff;
float:left;
display:inline;
}
#menu div{
width:120px;
text-align:center;
}
.menu{
position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
text-decoration:none;
padding-top:3px;
height:22px;
display:block;
}
#menu div a:link, #menu div a:visited{
background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
background:#ca0003;
}
.sousmenu{
position:absolute;
left:120px;
top:0;
}
#content{
margin:20px 0 0 10px;
width:600px;
border:1px solid #abc;
float:left;
A voir également:
- Problème de menu déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Excel
- Canon quick menu - Télécharger - Utilitaires
4 réponses
display:none; pour cacher quelque chose, me semble que pour ton code, il faut le mettre à #menu div.
C'est bien ce que je pensais mais ça ne fonctionne pas. Mais je me suis aperçu que je ne vous est pas mis tout le code qui concerne mes onglets.
Le voici en entier cette fois.
Et voici le html de mes onglets :
Le voici en entier cette fois.
*{
margin:0;
padding:0;
}
#menu{
margin:20px 0 0 50px;
background:#0f0;
color:#fff;
float:left;
display:inline;
}
#menu div{
width:120px;
text-align:center;
}
.menu{
position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
text-decoration:none;
padding-top:3px;
height:22px;
display:block;
}
#menu div a:link, #menu div a:visited{
background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
background:#ca0003;
}
.sousmenu{
position:absolute;
left:120px;
top:0;
}
#content{
margin:20px 0 0 10px;
width:600px;
border:1px solid #abc;
float:left;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: hover;
float: left;
background: url("http://biphome.spray.se/karl10/images/navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 115px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}
#navcontainer li#active { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }
#navcontainer a:hover { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }
Et voici le html de mes onglets :
<div id="navcontainer">
<ul class="glossymenu vert" id="navlist">
<li class="current"><a href="http://tounovoyages.blogspot.com/"><b>Accueil</b></a></li>
<li class="current">
<a href="http://tounovoyages.blogspot.com/2010/03/benevole-au-cambodge.html"><b>Bénévolat</b></a>
<ul>
<li><a href="http://www.krousar-thmey.org/"target=_blank>krousar thmey</a></li>
</ul>
<ul>
<li><a href="http://www.brick-for-cambodia.net/"target=_blank>Slarkram School</a></li>
</ul>
</li>
<li class="current"><a href="http://tounovoyages.blogspot.com/search/label/Guides%20pratiques"><b>Guides pratiques</b></a>
<ul>
<li><a href="http://tounovoyages.blogspot.com/search/label/Angkor%20pour%20les%20%22nuls%22">Angkor</a></li>
</ul>
<ul>
<li><a href="http://tounovoyages.blogspot.com/search/label/Le%20Vietnam%20pour%20les%20%22nuls%22">Vietnam</a>
</li>
</ul>
</li>
<li class="current"><a href="http://tounovoyages.blogspot.com/2009/04/votre-nom-ou-pseudo-votre-adresse-e.html"><b>Nous contacter</b></a></li>
<li class="current"><a href="http://tounovoyages.blogspot.com/search/label/Nos%20concours"><b>Nos concours</b></a></li></ul></div>