28172 sujets

CSS et mise en forme, CSS3

Bonjour

je ne suis pas du tout experte en CSS, je viens donc demander de l'aide pour un bug dans un site wordpress

comme vous pouvez le tester ICI
lorsqu'on souhaite cliquer sur un SOUS MENU de la navigation principale, le blco de sous menu disparaît parfois. bref on peut pas cliquer...

voici le code CSS de ma nav :
/*** ESSENTIAL STYLES ***/
#nav, #nav * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
#nav {
	line-height:	1.0;

}
#nav ul {
	position:		absolute;
	top:			-999em;
	width:			13em; /* left offset of submenus need to match (see below) */
	font-size:	18px;}
#nav ul li {
	width:			100%;
	
}
#nav li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
#nav li {
	float:			left;
	position:		relative;
}
#nav a {
	display:		block;
	position:		relative;
}
#nav li:hover ul,
#nav li.sfHover ul {
	left:			0;
	top:			42px; /* match top ul list item height */
	z-index:		99;
}
ul#nav li:hover li ul,
ul#nav li.sfHover li ul {
	top:			-999em;
}
ul#nav li li:hover ul,
ul#nav li li.sfHover ul {
	left:			13em; /* match ul width */
	top:			0;
}
ul#nav li li:hover li ul,
ul#nav li li.sfHover li ul {
	top:			-999em;
}
ul#nav li li li:hover ul,
ul#nav li li li.sfHover ul {
	left:			13em; /* match ul width */
	top:			0px;
}

/*** DEMO SKIN ***/
#nav {
	float:	right;
	font-family:  Helvetica,Verdana, Arial,sans-serif;
	font-size: 20px;
}
#nav a {
	padding: 1em;
	text-decoration:none;
}


#nav a, #nav a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color: #fff;
}

#nav li {

}

#nav li li{
	border-right: 0px;
}

#nav li li:first-child{
	
}

#nav li li a {
	background:	#3d3d3e;
	border-bottom: 1px solid #aaa;
	color: #fff;
	padding: 0.6em 1em;
}

#nav li li a:visited {
	color: #fff;
}

#nav li ul {
	background:	#fff;
	
}

#nav li:hover, #nav li.sfHover,
#nav a:focus, #nav a:hover, #nav a:active {
	outline: 0;
	color: #8fcc23;
	
}

#nav li ul li:hover, #nav li ul li.sfHover,
#nav li ul li a:focus, #nav li ul li a:hover, #nav li ul li a:active {
	outline: 0;
	color: #8fcc23;
}

#nav li.current_page_item a,
#nav li.current-cat a {
	color: #8fcc23;
}



quelqu'un a t il la solution ? Smiley confused
Modifié par clairecerise (19 Sep 2013 - 19:22)
Bonjour,

Pour corriger le problème il faut que tu modifies la valeur du top sur "#nav li:hover ul, #nav li.sfHover ul" comme ceci :
#nav li:hover ul,
#nav li.sfHover ul{
top:39px;
}


Si cela ne fonctionne pas, réduit encore cette valeur jusqu'à ce que ça soit bon. Smiley smile
Modifié par Raphi (19 Sep 2013 - 17:38)