28173 sujets

CSS et mise en forme, CSS3

[ Résolu ] Menu déroulant pb

Bonjour à tous,


je veux faire un joli menu déroulant mais en tentant d'adapter le code, j'obtiens bien ce que je veux en rollover mais la liste s'affiche curieusement.

La page avec le menu est là :
http://www.kimlico.com/CC/index.html

Le code css 


#nav, #nav ul {
	float: left;
	width: 780px;
	list-style: none;
	padding:0;
}

#nav a {
	display: block;
	width: 160px;
	text-decoration: none;
}


#nav li a {
	float: left;
	width: 160px;
	background-color:#333366;
	font-family:"Trebuchet MS";
	font-size:12px;
	color:#FFF;
	padding:5px;
	border-right:1px solid #FFF;
}

#nav li:hover {
background:#336666;
}

#nav li ul {
	position: absolute;
	display:block;
	left: -999em;
	width: 160px;
	font-weight: normal;
	margin:25px 0 0 0;
}

#nav li li {
	width: 160px;
	background:#999999;
}

#nav li li:hover {
	width: 160px;
}

#nav li ul a {
	width: 160px;
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#FFFFFF;
	background-color:#999999;
	padding:5 px;
	margin-top:1px;
}

#nav li ul a:hover {
	background-color:#FF6600;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#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;
}



#content {
	clear: left;
	color: #ccc;
}


je n'applique qu'une seule fois l'id "nav" sur la première balise <ul>.

Si cela vous inspire des reproches et conseils pour corriger, je suis plus que preneuse.

Merci à tous,
A.
Modifié par Fugugirl (15 Feb 2007 - 18:16)
Pour ceux qui galèrent comme moi pour adapter des gentils scripts super pratiques j'ai finalement trouvé la solution :

un "float:none" à attribuer à la balise li du sous-menu et tout rentre dans l'ordre sur FF. Bon maintenant on s'attaque à IE... rha.....
A+.
Modifié par Fugugirl (15 Feb 2007 - 16:28)
Sujet clos
Aller à