28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu deroulant qui se ferme pas

Bonjour,
j'ai un petit problème, j'aimerais que la liste des liens quand elles s'ouvrent, monte a la hauteur de home, quand j'ouvre scripophilie, cartes postales et buvards.
j'ai bien réussit à faire monter la liste du lien Scripophilie, mais le problème, la liste reste Ouverte, je n'arrive pas à ce qu'elle se referme... Smiley ohwell
Des idées?.
http://ile.chrispat.free.fr/menusimple.html 


<ul id="menu">
		<li>
			<a href="#">HOME</a>
			<ul class="menuderoulant">
    <li><a href="index.html" title="ACCUEIL">ACCUEIL</a></li>        
	<li><a href="liens.html" title=">MES LIENS</a></li>
    <li><a href="mail.html" title="ECRIVEZ-MOI">ECRIVEZ-MOI</a></li>		
            </ul>
		</li>
		<li>
			<a href="#">SCRIPOPHILIE</a>
			<ul class="menuderoulant2">			      
<li><a href="titre-action-scripophilie.html" title="">MA COLLECTION</a></li>
<li><a href="titre-action-bourse-collection.html" title="">MES TITRES BOURSE</a></li>
<li><a href="titre-action-bourse-financier.html" title="">TITRES RECHERCHES</a></li>
<li><a href="titre-action-boursier-ancien.html" title=" ">TITRES RECHERCHES 2</a></li>
<li><a href="stock-and-bond-certificates.html" title=" ">ANNONCES</a></li>
			</ul>
		</li>
		<li>
			<a href="#">CARTES POSTALES</a>
            <ul class="menuderoulant">
  <li><a href="#" title="">CARTES POSTALES:</a></li> 			      
      <li><a href="carte-postale-bastia.html" title="">DE BASTIA</a></li>
      <li><a href="carte-postale-bastia-2.html" title="">DE BASTIA 2</a></li>
      <li><a href="carte-postale-bateaux-corse.html" title="">BATEAUX DES CIES</a></li>
      <li><a href="carte-postale-bateaux-ajaccio.html" title="">PORT D'AJACCIO</a></li>
      <li><a href="carte-postale-bateaux-bastia.html" title="">PORT DE BASTIA</a></li>
      <li><a href="carte-postale-autre-port.html">PORTS DE CORSE</a></li>
      <li><a href="carte-postale-hotels-corse.html" title="">HOTELS DE CORSE</a></li>
			</ul>
		</li>
		<li>
            <a href="#">BILLETS-BUVARDS</a>
			<ul class="menuderoulant">			      
	<li><a href="billet-monnaie-piece-corse.html" title=" ">BILLETS MONNAIES</a></li>
      <li><a href="buvard-damiani-corse.html" title="">BUVARDS DAMIANI</a></li>
      <li><a href="buvard-mattei-capcorse.html" title="">BUVARDS MATTEI</a></li>
			</ul>
		</li>
	</ul>






  /* CSS Document */
#menu {
width:auto;      
height: auto;  
font: 11px verdana, sans-serif;  
font-weight: bold;  
list-style-type: none;  
margin: 0 auto;   
padding: 0; 
}
#menu > li {
width: 130px;
margin: 0em;
padding: 0;
border: 0;
}
#menu li a {
display: block;         
color: #000000; 
background-color:#30bffa;/* bleu */
background-color: rgb(48, 191, 250);
background-color: rgba(48, 191, 250, 0.5);
margin: 0;
padding: 4px 2px;
border:1px solid #000;
text-decoration: none;
}
#menu li a:hover {
background-color:#33f046;/* vert */
 background-color: rgb(51, 240, 70);
 background-color: rgba(51, 240, 70, 0.5);
}
#menu .menuderoulant, .menuderoulant2 {
width:180px; 	  
display: none;
list-style-type: none;
margin: -23px 0 0 105px;   
padding: 0;
border: 0;
position:absolute; 
}
#menu .menuderoulant2 {/*  */
width:145px;
margin: -47px 0 0 140px;/* remonte au niveau de home la liste scripophilie */
} 	
#menu .menuderoulant li, .menuderoulant2 li {
float: right;
margin:0 auto;
padding: 0;
border: 0;
width: 150px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a, .menuderoulant2 li a {
display: block;
color: #000;
margin: 0;
border: 0;
text-decoration: none;  
background-color:#30bffa;/* bleu */
background-color:rgb(48, 191, 250);
background-color:rgba(48, 191, 250,0.5);
}
#menu .menuderoulant li a:hover, .menuderoulant2 li a:hover {
background-color:#349eeb;/* bleu foncer */
background-color: rgb(52, 158, 235);
background-color: rgba(52, 158, 235, 0.8);
}

#menu .menuderoulant li a:visited, .menuderoulant2 li a:visited {
background-color:fa0806;/* rouge */
background-color:rgb(250, 8, 6);
background-color:rgba(250, 8, 6, 0.5); 
}
#menu li:hover > .menuderoulant, .menuderoulant2 { 
display: block; }

Modifié par Julien2B (26 Apr 2012 - 15:20)
Bonjour,

#menu li:hover > .menuderoulant, [#red].menuderoulant2 [/#]{
    [b]display: block;[/b]
}

A remplacer par :
#menu li:hover > .menuderoulant, [#red]#menu li:hover >.menuderoulant2 [/#]{
    [b]display: block;[/b]
}

Le javascript (pour les menus déroulants par exemple...), c'est bon, mangez-en Smiley cligne
Modifié par 6l20 (26 Apr 2012 - 17:12)
je te remercie de m'avoir aidé, à résoudre le problème, ça fonctionne à merveille.
merci encore!!.
Sujet clos
Aller à