28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment résoudre ce pb de menu style lavalamp?

Bonjour,

J'ai un menu dynamique style lavalamp.

Pour mon site : http://chti.sportif.free.fr/, j'ai repris le code css de ce theme mais j'ai fait qq modifications pour que puisse apparaître un sous menu.

Malheureusement entre 2 items, vous pouvez constater que le curseur situé initialement au niveau de l'item accueil à tendance à bugger.

Comment résoudre ce pb ? et comment forcer le curseur à rester sur l'item quand on déroule et se positionne sur un sous menu

D'avance merci

Le code css concerné :


/* Navigation principale */
	
#catmenucontainer{
	height:37px;
	background: url(/images/catmenu.png) repeat-x;
	display:block;
	padding:0px 0 0px 0px;
	font: 12px Tahoma,Century gothic,verdana, Arial, sans-serif;
	font-weight:normal;
	text-transform:uppercase;
	}
#nav {
    width: 960px;
    padding: 5px 10px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
        }
#nav li.back {
    background-color: #9faa11;
    width: 5px;
    height: 20px;
	border:1px solid #9faa11;
	border-radius:5px; 
	-moz-border-radius:5px; 
	-webkit-border-radius:5px;
	top:7px;
    z-index: 8;
    position: absolute;
                    }

#nav ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav li a, #nav li a:visited , #nav li a:link{
    font:  13px Trebuchet ms,Century gothic, Arial, Tahoma, sans seriff ;
    text-decoration: none;
    color:#fff;
    outline: none;
    text-align: center;
    top: 3px;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    height: 20px;
    position: relative;
    overflow: hidden;
    margin: auto 10px;
                    }
	
#nav li a:hover, #nav li a:active {
    border: none;
	color: #fff;
                   }
	
#nav li li a, #nav li li a:link, #nav li li a:visited {
	background:#728600;
	width: 150px;
	color: #E9EF86;
	font-size: 13px;
	font-family: tahoma, century gothic,Georgia,  sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	float: none;
	margin: 0px;
	padding: 8px 10px 7px 10px;
	border-bottom: 1px solid #94A709;
	}
	
#nav li li a:hover, #nav li li a:active {
	background: #545F06 ;
	color: #fff;
	padding: 8px 10px 7px 10px;
	}

#nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 120px;
	margin: 0px;
	padding: 0px;
	}

#nav li li { 
	}

#nav li ul a { 
	width: 100px;
	}

#nav li ul a:hover, #nav li ul a:active { 
	}

#nav li ul ul {
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, 
#nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: auto;
	}

#nav li:hover ul, #nav li li:hover ul, 
#nav li li li:hover ul, #nav li.sfhover ul, 
#nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	}

#nav li:hover, #nav li.sfhover { 
	position: static;
	}



La page HTML


<div id="catmenucontainer">
		<div id="nav">
				<ul id="A">
  <li><a href="/index.php">Accueil</a></li>
  <li><a href="/blog/">Blog</a>
  <li><a href="/calendrier.php">Calendrier</a>
   <ul>
    <li><a href="/cartecalendar.php">Sports Outdoor</a></li>
    <li><a href="/cartecalendar_trail.php">Trail</a></li>
    <li><a href="/cartecalendar_randovtt.php">Rando VTT</a></li>
   </ul>
  </li>
  <li><a href="/resultats.php">Résultats</a></li>
  <li><a href="/forum/index.php">Forum</a>
	<ul>
	<li><a href="/forum/memberlist.php">Membres</a></li>
	</ul>
  </li>
  <li><a href="/liens.php">Liens</a></li>
  <li><a href="/contact.php">Contact</a></li>
  <li><a href="/livredor/index.php">Livre d'or</a></li>
				</ul>
		</div>	
</div>

Modifié par CyberNord (19 Jan 2011 - 12:34)
Bon apparemment ce n'est pas possible de faire des sous-menus avec lavalamp donc je retire cette fonction.
Merci, je vais regarder cela
EDIT : ça marche merci

Dernier souçi :
entre 2 items, vous pouvez constater que le curseur situé initialement au niveau de l'item accueil à tendance à bugger.
Une solution ?

EDIT : c'était position: static; qui génait
Modifié par CyberNord (19 Jan 2011 - 12:34)
Sujet clos
Aller à