CSS - Lien case menu déroulant

CSS - Lien case menu déroulant - HTML/CSS - Programmation

Marsh Posté le 10-06-2011 à 16:44:03    

Bonjour à tous,
 
j'ai réalisé un petit menu déroulant avec le CSS et les cases contiennent des liens. Pour l'instant, il y a juste le lien qui est cliquable et je souhaiterais que toute ma case soit cliquable.  
 
Ci-dessous mon code CSS :

Code :
  1. body
  2. {
  3. behavior: url("csshover.htc" );
  4. font-family:Trebuchet MS;
  5. font-size:14px;
  6. height: 100%;
  8. }
  10. #menu_dynamique
  11. {
  12. width:90%;
  13. margin: auto;
  14. padding: auto;
  15. height:25px;
  16. font-family:Trebuchet MS;
  17. font-size:13px;
  18. font-weight:bold;
  19. border: none;
  20. }
  22. #menu_dynamique li
  23. {
  24. float:left;
  25. width: 19%;
  26. height:21px;
  27. border: 2px solid silver;
  28. padding-top: 3px;
  29. text-align:center;
  30. color: #5093b2;
  31. text-decoration: none;
  32. list-style-type: none;
  33. background-color: white;
  35. }
  37. #menu_dynamique .extend
  38. {
  39. background-position: right;
  40. background-color: white;
  41. border-color: #5093b2;
  42. }
  44. #menu_dynamique li:hover
  45. {
  46. color: black;
  47. background-color: #bdb6c6;
  48. }
  50. #menu_dynamique .none
  51. {
  52. border-right: none;
  53. border-left: none;
  54. }
  56. #menu_dynamique .extend .sans
  57. {
  58. border-top: none;
  59. border-bottom: none;
  60. }
  62. #menu_dynamique .extend .mil
  63. {
  64. border-bottom: none;
  65. }
  67. #menu_dynamique .extend .bas
  68. {
  69. border-top: none;
  70. }
  72. #menu_dynamique li ul li
  73. {
  74. display: none;
  75. }
  77. #menu_dynamique .extend:hover
  78. {
  79.    z-index: 500;
  80. }
  82. #menu_dynamique .extend:hover ul li
  83. {
  84. display: inline;
  85. position: relative;
  86. width: 120%;
  87. height: 21px;
  88. white-space: nowrap;
  89. background: white;
  90. color:#1875d6;
  91. padding: 3px;
  92. }
  94. #menu_dynamique .extend:hover ul li
  95. {
  96. top: 5px;
  97. left: -42px;
  98. }
  99. A:link { COLOR: #5093b2; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }
  100. A:visited { COLOR: #5093b2; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }
  101. A:active { COLOR: #EA4429; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }
  102. A:hover { COLOR: #EA4429; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }


 
et mon menu en HTML :

Code :
  1. <ul id="menu_dynamique">
  3.      <li class="extend">Infos & Vuln&eacute;rabilit&eacute;s<ul>
  4. <li><a href="traitement.php">Logiciels</a></li>
  5. <li class="sans"><a href="traitementmat.php">Mat&eacute;riels</a></li>
  6. <li><a href="traitementclient.php">Clients</a></li>
  8. </ul>
  9. </li>
  11. <li class="extend none">Gestion du Parc Informatique</a><ul>
  12. <li><a href="../ouapi1.0/index.php">G&eacute;rer le Parc Informatique</a></li>
  13. <li class="sans"><a href="traitementcontrat.php">Contrats</a></li>
  14. <li><a href="traitementmarque.php">Marques & Types</a></li>
  16. </ul>
  17. </li>
  19. <li class="extend">Gestion des infos<ul>
  21.  <li><a href="ajout_info.php">Ajouter une info</a></li>
  22.  <li class="bas"><a href="modifinfo.php">Modifier/Supprimer info</a></li>
  23.    
  24.  </ul>
  26. </li>
  28. <li class="extend none">Gestion des vuln&eacute;rabilit&eacute;s
  30.  <ul>
  32.  <li><a href="actu_flux.php">Actualiser les flux RSS</a></li>
  33.  <li class="sans"><a href="ajout_flux.php">Ajouter un flux RSS</a></li>
  34.     <li class="mil"><a href="removeflux.php">Supprimer un flux RSS</a></li>
  35.  <li><a href="removerss.php">Supprimer vuln&eacute;rabilit&eacute;</a></li>
  36.  </ul>
  38. <li class="extend"><a href="http://www.groupe-ocealis.com/ocealis-securite.html" title="Lien vers le site d'Ocealis S&eacute;curit&eacute;">Ocealis S&eacute;curit&eacute;</a></li>
  40. </ul>


 
Merci d'avance !
 

Reply

Marsh Posté le 10-06-2011 à 16:44:03   

Reply

Marsh Posté le 11-06-2011 à 00:54:35    

Il faut mettre un
#menu_dynamique li a{ display:block; }
 

Reply

Marsh Posté le 14-06-2011 à 09:36:57    

Merci pour ta réponse egege mais ça ne marche pas

Reply

Marsh Posté le 14-06-2011 à 09:51:07    

Voilà il faut faire ça :
 
    #menu_dynamique li ul li a
    {
        display:block;
        width:100%;
        height:100%;
    }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed