IE7 background:transparent; fait bugguer le menu déroulant

Tout d'abord bonjour, ceci est mon premier post, j'espère respecter au mieux les règles de cet endroit.

Après une après midi de recherche sur le web, sur différents forums dont celui ci, je n'ai pas vraiment trouvé la solution à mon petit problème, je vous explique :

pour un site internet que je suis en train de faire, j'ai créé une navigation sous forme de menu déroulant, le défis étant de la faire en pure css ( + un petit javascript pour notre ami IE6). Je suis arrivée à mes fins grâce à trois tutos super utiles :
- ce tuto pour la structure : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- celui ci pour les gradients en pure css sans utiliser d'image : http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
- celui ci pour les flèches en pure css : http://www.dinnermint.org/css/creating-triangles-in-css/

Et voilà le résultat : http://www.saiko-sama.fr/tests/navig_degrade_unfixed.html

Où est le problème allez vous me demander ? Sous firefox pas de souci, chrome pareil, opera ne prend pas les dégradés mais sinon aucun souci non plus. Ouvrez le lien avec IE7 (ou IE8 en mode de compatibilité), et vous comprendrez : il est impossible de cliquer sur le menu qui se déroule.

Voici la partie de la css utilisée :

/* Menu déroulant */
#nav ul {
	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 30px;
	left: 0;
	background: transparent;
}

#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
	background: #7eba3d;
}

et voici le code html qui correspond à ma navigation déroulante :

<ul id="nav">
	<li class="current"><a href="#">Home</a></li>
	<li><a href="#">Le projet</a>
		<ul>
			<li class="css-arrow-up"> </li>
			<li><a href="#">Pr&eacute;sentation</a></li>
			<li><a href="#">Objectifs</a></li>
			<li><a href="#">Historique</a></li>
					
		</ul>
	</li>
	<li><a href="#">Actualit&eacute;s du projet </a></li>	
	<li><a href="#">Documentation</a></li>
	<li><a href="#">Economiser l'&eacute;nergie</a></li>
	<li><a href="#">A propos </a>
		<ul>
			<li class="css-arrow-up"> </li>
			<li><a href="#">Nous contacter</a></li>
			<li><a href="#">Nos Partenaires</a></li>
			<li><a href="#">Projets similaires</a></li>		
			<li><a href="#">Revue de Presse</a></li>	
			<li><a href="#">Newsletter </a></li>				
		</ul>	
	</li>
</ul>

En fait j'ai choisit de mettre le fond du menu déroulant <ul> en transparent pour que le <li class="css-arrow-up"> qui va contenir ma flèche en css soit sur fond transparent aussi. Du coup, chose curieuse, cela fait bugguer mon menu déroulant sous IE7 (et 6 accessoirement aussi il me semble).

Deux solutions trouvées :
- donner une couleur pour que IE7 soit content du style background: #fff; mais dans ce cas ma petite flèche n'a plus de fond transparent et ce n'est pas le but, surtout que le menu sera posé sur une image
- donner un "faux" background :

/* hack IE7 pour régler le soucis de la transparence */
*+html #nav ul  {
background: url(ieestunnavigateuretrange); /* ne comprend pas pourquoi il faut lui mettre un pixel pour que ça ne bug pas */
}

Oui vous avez bien lu ... Il suffit faire "croire" à IE7 qu'il a une image, même si elle a un nom bidon, même si elle n'existe pas, pour que le problème soit résolu comme vous pouvez le voir ici : http://www.saiko-sama.fr/tests/navig_degrade_fixed.html

Pourquoi mettre une sujet sur le forum si j'ai résolu mon souci allez-vous me demander ?

A vrai dire, je ne suis vraiment pas satisfaite de mon "bidouillage", que je ne trouve pas propres du tout, donc je voulais savoir si d'autres personnes ont été comme moi déjà confrontées à ce genre de soucis, si c'est un bug connu de IE7 et si vous avez des idées plus "propres" que ma petite cuisine perso.

@ bientôt ^^
Modifié par saiko_sama (22 Apr 2010 - 09:01)