Se connecter avec
S'enregistrer | Connectez-vous

[RESOLU] [CSS] Mon menu déroulant est censé etre au dessus

Dernière réponse : dans Programmation

Bonjour,
je ne comprends pas ou est mon erreur : avant que je fasse quelques modifs, ca marchait bien, et apres ca n'a plus marché. j'ai eu beau revenir en arriere, ca n'a rien amélioré. Sous FF ca marche impec et sous IE ca merde. Alors que c'était l'inverse et c'est pour ca que j'ai fait des modifs...
Voici mon code:
  1. #menu {
    

  2. 	margin: 50px 0 100px 0;
    

  3. 	padding: 0;
    

  4. 	width: 100%;
    

  5. 	position: relative;
    

  6. 	text-align: left;
    

  7. 	color: #FFF;
    

  8. 	float: left;
    

  9. }
    

  10.  
  11. #menu ul {
    

  12. 	margin: 0px 0 10px 0px;
    

  13. 	padding: 0;
    

  14. 	display: block;
    

  15. 	width: 100%;
    

  16. 	border-top: 1px solid #AAA;
    

  17. }
    

  18.  
  19. #menu ul li {
    

  20. 	margin:  0;
    

  21. 	padding: 0;
    

  22. 	display: block;
    

  23. 	list-style-type: none;
    

  24. 	font-weight: normal;
    

  25. 	border-bottom: 1px solid #AAA;
    

  26. }
    

  27.  
  28. #menu ul li ul {
    

  29. 	display: none;
    

  30. }
    

  31.  
  32. #menu ul li:hover ul {
    

  33. 	margin: -25px 0 0 120px;
    

  34. 	padding: 1px 0 0 0;
    

  35. 	width: 135px;
    

  36. 	background: #FFF;
    

  37. 	display: block;
    

  38. 	position: absolute;
    

  39. 	border-top: 1px solid #AAA;
    

  40. 	border-right: 2px solid #444;
    

  41. 	border-bottom: 2px solid #444;
    

  42. 	z-index: 10;
    

  43. }
    

  44.  
  45. #menu ul li ul li {
    

  46. 	margin: -1px 0 0 0;
    

  47. 	padding: 0;
    

  48. 	list-style-type: none;
    

  49. 	font-weight: normal;
    

  50. 	display: block;
    

  51. 	background: #FFF;
    

  52. 	border-right: 1px solid #AAA;
    

  53. }
    

  54.  
  55. #menu a, #menu a:active, #menu a:visited {
    

  56. 	margin: 0;
    

  57. 	padding: 0 0 0 10px;
    

  58. 	line-height: 200%;
    

  59. 	display: block;
    

  60. 	text-decoration: none;
    

  61. 	color: #000;
    

  62. }
    

  63.  
  64. #menu a:hover {
    

  65. 	color: #EC7413;
    

  66. }


et sinon pour voir ce que ca donne réellement, voir ma signature.

Merci de bien vouloir me venir en aide.

Autres pages sur : resolu css menu deroulant cense

Lassé par la pub ? Créez un compte
Expert Programmation

Essaie de définir de façon explicite la largeur de tes blocs de sous menus en mettant un width: 100%; par ex dans ton #menu ul li...

Souvent IE ne gère pas correctement les affichages quand les dimensions ne sont pas précisément définies...

Mais je ne suis pas sur.

Trouvé !!
En fait, ma page se compose de plusieurs div. Un div "entete", un div "leftbloc", un div "text" et un div "copyright".
Mon menu est dans le div "leftbloc", et donc le z-index doit lui etre attribué, pas au #menu ul li ul. Voilà mon erreur. C'est tout le "leftbloc" qui doit prendre le pas sur "text".

En revanche, j'arrive pas à mettre un bord gauche à mes sous menu. Ils ne veulent pas prendre autre chose que la hauteur nominale (120%) de la police. Comment je peux les obliger à grandir? ils ne touchent ni en haut ni en bas... j'ai tenté de jouer sur les a, les li, rien n'y fait...
Le code HTML de mon menu:
  1. <div id="menu">
    

  2. 	<ul>
    

  3. 		<li><a href="/index.php">Accueil</a></li>
    

  4. 		<li><a href="/CV/index.php">Curriculum Vitae</a></li>
    

  5. 		<li><a href="/stages/index.php">Stages</a>
    

  6. 			<ul>
    

  7. 				<li><a href="/stages/IRCOMSIC/index.php">IRCOM-SIC</a></li>
    

  8. 				<li><a href="/stages/FEDERALMOGUL/index.php" class="borduregauche">Federal-Mogul</a></li>
    

  9. 			</ul>
    

  10. 		</li>
    

  11. 		<li><a href="/photos/index.php">Photos</a>
    

  12. 			<ul>
    

  13. 				<li><a href="/photos/animaux/index.php">Animaux</a></li>
    

  14. 				<li><a href="/photos/macro/index.php" class="borduregauche">Macros</a></li>
    

  15. 				<li><a href="/photos/paysages/index.php" class="borduregauche">Paysages</a></li>
    

  16. 				<li><a href="/photos/personnages/index.php" class="borduregauche">Les potes</a></li>
    

  17. 				<li><a href="/photos/poissy/index.php" class="borduregauche">Poissy</a></li>
    

  18. 				<li><a href="/photos/stgermain/index.php" class="borduregauche">St Germain en Laye</a></li>
    

  19. 				<li><a href="/photos/vauxsurseine/index.php" class="borduregauche">Vaux sur Seine</a></li>
    

  20. 			</ul>
    

  21. 		</li>
    

  22. 		<li><a href="<a href="http://jeanmarion.free.fr" target="_blank">http://jeanmarion.free.fr</a>" target="_blank" title="Carnet de route de notre voyage au Sri Lanka">Sri Lanka</a></li>
    

  23. 		<li><a href="<a href="http://duckyduck.free.fr" target="_blank">http://duckyduck.free.fr</a>" target="_blank" title="Tout plein de vidéos, des jeux...">Vidéos</a></li>
    

  24. 		<li><a href="/liens/index.php">Liens</a>
    

  25. 			<ul>
    

  26. 				<li><a href="<a href="http://duckyduck.free.fr/annonce_clio" target="_blank">http://duckyduck.free.fr/annonce_clio</a>" target="_blank">Clio III à vendre</a></li>
    

  27. 				<li><a href="<a href="http://www.presence-pc.com/forum" target="_blank">http://www.presence-pc.com/forum</a>" target="_blank" class="borduregauche">Forum presence-pc</a></li>
    

  28. 			</ul>
    

  29. 		</li>
    

  30. 		<li><a href="/contact/index.php">Contact</a></li>
    

  31. 	</ul>
    

  32. </div>

Le code css de mon menu:
  1. #menu {
    

  2. 	margin: 0;
    

  3. 	padding: 0;
    

  4. 	width: 100%;
    

  5. 	position: relative;
    

  6. 	text-align: left;
    

  7. 	float: left;
    

  8. }
    

  9.  
  10. #menu ul {
    

  11. 	margin: 0;
    

  12. 	padding: 0;
    

  13. 	display: block;
    

  14. 	float: left;
    

  15. 	border-top: 1px solid #AAA;
    

  16. }
    

  17.  
  18. #menu ul li {
    

  19. 	margin: -1px 0 0 0;
    

  20. 	padding: 0;
    

  21. 	width: 155px;
    

  22. 	display: block;
    

  23. 	line-height: 200%;
    

  24. 	float: top;
    

  25. 	list-style-type: none;
    

  26. 	text-align: left;
    

  27. 	border-bottom: 1px solid #AAA;
    

  28. }
    

  29.  
  30. #menu ul li ul {
    

  31. 	margin: -5px 0 0 50px;
    

  32. 	padding: 0;
    

  33. 	width: 100%;
    

  34. 	display: none;
    

  35. 	position: absolute;
    

  36. 	display: none;
    

  37. 	float: left;
    

  38. 	border-top: 2px solid #AAA;
    

  39. 	border-right: 2px solid #222;
    

  40. 	border-bottom: 1px solid #222;
    

  41. }
    

  42.  
  43. #menu ul li:hover ul {
    

  44. 	display: block;
    

  45. }
    

  46.  
  47. #menu ul li ul li {
    

  48. 	margin: -1px 0 0 0;
    

  49. 	padding: 0;
    

  50. 	width: 100%;
    

  51. 	line-height: 200%;
    

  52. 	background: #FFF;
    

  53. 	list-style-type: none;
    

  54. 	border-right: 1px solid #AAA;
    

  55. 	float: left;
    

  56. }
    

  57.  
  58. #menu a, #menu a:active, #menu a:visited {
    

  59. 	margin: 0;
    

  60. 	padding: 0 10px 0 10px;
    

  61. 	width: 100%;
    

  62. 	text-decoration: none;
    

  63. }
    

  64.  
  65. #menu a:hover {
    

  66. 	color: #EC7413;
    

  67. }
    

  68.  
  69. .borduregauche {
    

  70. 	border-left: 1px solid #AAA;
    

  71. }

Merci.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet