Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1923 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS - Lien case menu déroulant

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS - Lien case menu déroulant

n°2081885
boss183
Posté le 10-06-2011 à 16:44:03  profilanswer
 

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%;
  7. }
  8. #menu_dynamique
  9. {
  10. width:90%;
  11. margin: auto;
  12. padding: auto;
  13. height:25px;
  14. font-family:Trebuchet MS;
  15. font-size:13px;
  16. font-weight:bold;
  17. border: none;
  18. }
  19. #menu_dynamique li
  20. {
  21. float:left;
  22. width: 19%;
  23. height:21px;
  24. border: 2px solid silver;
  25. padding-top: 3px;
  26. text-align:center;
  27. color: #5093b2;
  28. text-decoration: none;
  29. list-style-type: none;
  30. background-color: white;
  31. }
  32. #menu_dynamique .extend
  33. {
  34. background-position: right;
  35. background-color: white;
  36. border-color: #5093b2;
  37. }
  38. #menu_dynamique li:hover
  39. {
  40. color: black;
  41. background-color: #bdb6c6;
  42. }
  43. #menu_dynamique .none
  44. {
  45. border-right: none;
  46. border-left: none;
  47. }
  48. #menu_dynamique .extend .sans
  49. {
  50. border-top: none;
  51. border-bottom: none;
  52. }
  53. #menu_dynamique .extend .mil
  54. {
  55. border-bottom: none;
  56. }
  57. #menu_dynamique .extend .bas
  58. {
  59. border-top: none;
  60. }
  61. #menu_dynamique li ul li
  62. {
  63. display: none;
  64. }
  65. #menu_dynamique .extend:hover
  66. {
  67.    z-index: 500;
  68. }
  69. #menu_dynamique .extend:hover ul li
  70. {
  71. display: inline;
  72. position: relative;
  73. width: 120%;
  74. height: 21px;
  75. white-space: nowrap;
  76. background: white;
  77. color:#1875d6;
  78. padding: 3px;
  79. }
  80. #menu_dynamique .extend:hover ul li
  81. {
  82. top: 5px;
  83. left: -42px;
  84. }
  85. A:link { COLOR: #5093b2; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }
  86. A:visited { COLOR: #5093b2; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }
  87. A:active { COLOR: #EA4429; FONT-FAMILY: Trebuchet MS; FONT-SIZE: 10pt; font-weight:bold; TEXT-DECORATION: none }
  88. 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">
  2.      <li class="extend">Infos & Vuln&eacute;rabilit&eacute;s<ul>
  3. <li><a href="traitement.php">Logiciels</a></li>
  4. <li class="sans"><a href="traitementmat.php">Mat&eacute;riels</a></li>
  5. <li><a href="traitementclient.php">Clients</a></li>
  6. </ul>
  7. </li>
  8. <li class="extend none">Gestion du Parc Informatique</a><ul>
  9. <li><a href="../ouapi1.0/index.php">G&eacute;rer le Parc Informatique</a></li>
  10. <li class="sans"><a href="traitementcontrat.php">Contrats</a></li>
  11. <li><a href="traitementmarque.php">Marques & Types</a></li>
  12. </ul>
  13. </li>
  14. <li class="extend">Gestion des infos<ul>
  15.  <li><a href="ajout_info.php">Ajouter une info</a></li>
  16.  <li class="bas"><a href="modifinfo.php">Modifier/Supprimer info</a></li>
  17.    
  18.  </ul>
  19. </li>
  20. <li class="extend none">Gestion des vuln&eacute;rabilit&eacute;s
  21.  <ul>
  22.  <li><a href="actu_flux.php">Actualiser les flux RSS</a></li>
  23.  <li class="sans"><a href="ajout_flux.php">Ajouter un flux RSS</a></li>
  24.     <li class="mil"><a href="removeflux.php">Supprimer un flux RSS</a></li>
  25.  <li><a href="removerss.php">Supprimer vuln&eacute;rabilit&eacute;</a></li>
  26.  </ul>
  27. <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>
  28. </ul>


 
Merci d'avance !
 

mood
Publicité
Posté le 10-06-2011 à 16:44:03  profilanswer
 

n°2081922
egege
Posté le 11-06-2011 à 00:54:35  profilanswer
 

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

n°2082272
boss183
Posté le 14-06-2011 à 09:36:57  profilanswer
 

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

n°2082274
boss183
Posté le 14-06-2011 à 09:51:07  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS - Lien case menu déroulant

 

Sujets relatifs
Wordpress - Menu déroulantCode Css erroné ?
Problème CSS : Alignement et/ou widthVBA Lien Catia - Excel / ou comment créer une liaison vers un classeur
Menu deroulant java[HTML/CSS/Javascript] Problème d'affichage avec ie
[RESOLU] linux bash case[résolu]Problème DHTML, liaison entre js et CSS
Plus de sujets relatifs à : CSS - Lien case menu déroulant


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR