Problème de CSS

Problème de CSS - HTML/CSS - Programmation

Marsh Posté le 28-10-2005 à 17:33:37    

Bonjour !
 
J'ai changé un morceau de code CSS d'un exemple pour un menu et cela ne marche pas et je ne comprends pas.
 
Voilà les deux pages :
 

Code :
  1. div#nav ul.level1 li.submenu:hover ul.level2,
  2. div#nav ul.level2 li.submenu:hover ul.level3 {display: block;}


 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.         "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Project 6</title>
  6. <style type="text/css">
  7. body {background: #EEE; color: #000;
  8.   behavior: url(csshover.htc);} /* WinIE behavior call */
  9. div#nav {float: left; width: 7em;
  10.   background: #FDD;}
  11. div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
  12.   border: 1px solid;}
  13. div#nav li {position: relative; list-style: none; margin: 0;
  14.   border-bottom: 1px solid #CCC;}
  15. div#nav li:hover {background: #EBB;}
  16. div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
  17. div#nav li.submenu:hover {background-color: #EDD;}
  18. div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  19.   text-decoration: none; width: 6.5em;}
  20. div#nav>ul a {width: auto;}
  21. div#nav ul ul {position: absolute; top: 0; left: 7em;
  22.   display: none;}
  23. div#nav ul.level1 li.submenu:hover ul.level2,
  24. div#nav ul.level2 li.submenu:hover ul.level3 {display: block;}
  25. </style>
  26. </head>
  27. <body>
  29. <div id="nav">
  30. <ul class="level1">
  31. <li><a href="/">Home</a></li>
  32. <li class="submenu"><a href="/services/">Services</a>
  33.   <ul class="level2">
  34.    <li><a href="/services/strategy/">Strategy</a></li>
  35.    <li><a href="/services/optimize/">Optimization</a></li>
  36.    <li><a href="/services/guidance/">Guidance</a></li>
  37.    <li><a href="/services/training/">Training</a></li>
  38.   </ul>
  39. </li>
  40. <li><a href="/events/">Events</a></li>
  41. <li class="submenu"><a href="/pubs/">Publications</a>
  42.   <ul class="level2">
  43.    <li><a href="/pubs/articles/">Articles</a></li>
  44.    <li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
  45.     <ul class="level3">
  46.      <li><a href="/pubs/tuts/html/">HTML</a></li>
  47.      <li><a href="/pubs/tuts/css/">CSS</a></li>
  48.      <li><a href="/pubs/tuts/svg/">SVG</a></li>
  49.      <li><a href="/pubs/tuts/xml/">XML</a></li>
  50.     </ul>
  51.    </li>
  52.    <li><a href="/pubs/wpapers/">White Papers</a></li>
  53.    <li><a href="/pubs/comment/">Commentary</a></li>
  54.   </ul>
  55. </li>
  56. <li><a href="/contact/">Contact</a></li>
  57. </ul>
  58. </div>
  60. </body>
  61. </html>


CSS par Eric Meyer.
 
 
 
 

Code :
  1. #menu dt:hover dd,
  2. #menu dd a:hover ul {display: block;}


 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Project 6</title>
  5. <script type="text/javascript">
  6. <!--
  7. window.onload=montre;
  8. function montre(id) {
  9.   for(var i = 1; i<=20; i++){
  10.     if (document.getElementById('sm'+i)) {document.getElementById('sm'+i).style.display='none';}
  11.     if (document.getElementById('ssm'+i)) {document.getElementById('ssm'+i).style.display='none';}
  12.   }
  13.   document.getElementById('sm'+id).style.display='block';
  14. }
  15. function montressm(id) {
  16.   for(var i = 1; i<=20; i++){
  17.     if (document.getElementById('ssm'+i)) {document.getElementById('ssm'+i).style.display='none';}
  18.   }
  19.   document.getElementById('ssm'+id).style.display='block';
  20. }
  21. //-->
  22. </script>
  23. <style type="text/css">
  24. <!--
  25. body {padding: 0; margin: 1px;}
  26. dl, dt, dd, ul, li {margin: 0; padding: 0; list-style-type: none;}
  27. #menu {width: 7em; position: absolute; top: 1px; left: 1px; border: 1px solid blue;}
  28. #menu dt {cursor: pointer; font-weight: bold;}
  30. #menu dd {
  31. width: 8em;
  32. position: absolute;
  33. left: 7em;
  34. margin-top: -2em;
  35. border: 1px solid blue;
  36. display: none;
  37. }
  38. #menu dd a {width: 8em;}
  40. #menu dd ul {position: absolute; left: 8em; border: 1px solid blue; width: 9em; margin-top: -2em;}
  41. #menu li a {height: 2em; width: 9em;}
  42. #menu a {
  43. text-align: center;
  44. color: #000;
  45. text-decoration: none;
  46. display: block;
  47. height: 2em;
  48. background: #2cd8e0;
  49. width: 7em;
  50. }
  51. #menu a:hover {text-decoration: underline;}
  52. #menu dt:hover dd,
  53. #menu dd a:hover ul {display: block;}
  54. -->
  55. </style>
  56. </head>
  57. <body>
  59. <dl id="menu">
  60.   <dt onmouseover="montre(1)"><a href="#">Menu 1</a></dt>
  61.     <dd id="sm1">
  62.       <a href="#">Sous-Menu 1.1</a>
  63.       <a href="#">Sous-Menu 1.2</a>
  64.       <a href="#">Sous-Menu 1.3</a>
  65.     </dd>
  67.   <dt onmouseover="montre(2)"><a href="#">Menu 2</a></dt>
  68.     <dd id="sm2" onmouseover="montressm(1)">
  69.       <a href="#">Sous-Menu 2.1</a>
  70.         <ul id="ssm1">
  71.           <li><a href="#">Sous-Sous-Menu 1</a></li>
  72.         </ul>
  73.       <a href="#">Sous-Menu 2.2</a>
  74.     </dd>
  76.   <dt onmouseover="montre(3)"><a href="#">Menu 3</a></dt>
  77.     <dd id="sm3">
  78.       <a href="#">Sous-Menu 3.1</a>
  79.       <a href="#">Sous-Menu 3.2</a>
  80.       <a href="#">Sous-Menu 3.3</a>
  81.       <a href="#">Sous-Menu 3.4</a>
  82.       <a href="#">Sous-Menu 3.5</a>
  83.       <a href="#">Sous-Menu 3.6</a>
  84.     </dd>
  86.   <dt onmouseover="montre(4)"><a href="#">Menu 4</a></dt>
  87.     <dd id="sm4">
  88.       <a href="#">Sous-Menu 4.1</a>
  89.       <a href="#">Sous-Menu 4.2</a>
  90.     </dd>
  91. </dl>
  93. </body>
  94. </html>


 
Je vous ai remis les deux morceaux de code en question.
Merci !

Reply

Marsh Posté le 28-10-2005 à 17:33:37   

Reply

Sujets relatifs:

Leave a Replay

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