ugrás a tartalomhoz

Több szintű CSS lista menü IE-ben nem csukódik be

Anonymous · 2005. Okt. 25. (K), 17.11
Helló!

Összetákoltam egy több szintű CSS menüt, de sajnos (IE-ben) nem tökéletes.

A kód:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2.   
  3. <html>  
  4. <head>  
  5.     <title>CSS menü</title>  
  6.       
  7.     <style type="text/css">  
  8.       
  9.     body  
  10.     {  
  11.         behavior: url(csshover.htc);  
  12.     }  
  13.       
  14.     #menu a  
  15.     {  
  16.         display: block;  
  17.         background: gray;  
  18.         font-family: arial;  
  19.         text-decoration: none;  
  20.         font-size: 12px;  
  21.         color: black;  
  22.         height: 30px;  
  23.     }  
  24.       
  25.     #menu a:hover  
  26.     {  
  27.         background: white;  
  28.         color: black;  
  29.     }  
  30.       
  31.     #menu ul ul  
  32.     {  
  33.         display: none;  
  34.     }  
  35.       
  36.     #menu ul li:hover ul  
  37.     {  
  38.         display: block;  
  39.     }  
  40.       
  41.       
  42.     #menu ul  
  43.     {  
  44.         margin: 0;  
  45.         padding: 0;  
  46.         list-style: none;  
  47.     }  
  48.       
  49.     #menu ul li  
  50.     {  
  51.         float: left;  
  52.         width: 70px;  
  53.     }  
  54.       
  55.     #menu ul ul ul li  
  56.     {  
  57.         position: relative;  
  58.         left: 100%;  
  59.         top: -30px;  
  60.         display: none;  
  61.     }  
  62.       
  63.     #menu ul li ul li:hover ul li  
  64.     {  
  65.         display: block;  
  66.     }  
  67.           
  68.     </style>  
  69.       
  70. </head>  
  71.   
  72. <body>  
  73.   
  74. <div id="menu">  
  75. <ul>  
  76.     <li>főmenü1  
  77.         <ul>  
  78.             <li><a href="">egy</a></li>  
  79.             <li><a href="">kettő</a></li>  
  80.             <li><a href="">három</a>  
  81.               
  82.                 <ul>  
  83.                     <li><a href="">zöld</a></li>  
  84.                     <li><a href="">piros</a></li>  
  85.                     <li><a href="">zöld</a></li>  
  86.                     <li><a href="">piros</a></li>  
  87.                 </ul>  
  88.             </li>  
  89.         </ul>  
  90.     </li>  
  91.       
  92.     <li>főmenü2  
  93.         <ul>  
  94.             <li><a href="">egy</a></li>  
  95.             <li><a href="">kettő</a></li>  
  96.             <li><a href="">három</a></li>  
  97.         </ul>  
  98.     </li>  
  99.   
  100. </ul>  
  101. </div>  
  102.   
  103. </body>  
  104. </html>  
Ha IE-ben ha lenyitom "három" almenü pontjából nyíló almenüt és leviszem az egeret a "három" almenü pont alá, akkor nem csukódik be a menü.

Néztem mások által megvalósított CSS menüt, de valahogy mindenki máshogy csinálja.
‹ Ha linkeknél szöveg helyett kép van, akkor rés keletkezik a képek között (XHTML) IE DHTML Editing Component hiba ›
 ■
1

Pontosítok

Anonymous · 2005. Okt. 25. (K), 17.16
Firefoxban is ugyanez a jelenség.
2

Megoldva

Anonymous · 2005. Okt. 25. (K), 17.28
Így már jó:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2.   
  3. <html>  
  4. <head>  
  5.     <title>CSS menü</title>  
  6.       
  7.     <style type="text/css">  
  8.       
  9.     body  
  10.     {  
  11.         behavior: url(csshover.htc);  
  12.     }  
  13.       
  14.     #menu a  
  15.     {  
  16.         display: block;  
  17.         background: gray;  
  18.         font-family: arial;  
  19.         text-decoration: none;  
  20.         font-size: 12px;  
  21.         color: black;  
  22.         height: 30px;  
  23.     }  
  24.       
  25.     #menu a:hover  
  26.     {  
  27.         background: white;  
  28.         color: black;  
  29.     }  
  30.       
  31.     #menu ul ul  
  32.     {  
  33.         display: none;  
  34.     }  
  35.       
  36. <span style="font-weight:bold">  
  37.     #menu ul ul ul  
  38.     {  
  39.         position: absolute;  
  40.     }  
  41. </span>  
  42.       
  43.     #menu ul li:hover ul  
  44.     {  
  45.         display: block;  
  46.     }  
  47.       
  48.       
  49.     #menu ul  
  50.     {  
  51.         margin: 0;  
  52.         padding: 0;  
  53.         list-style: none;  
  54.     }  
  55.       
  56.     #menu ul li  
  57.     {  
  58.         float: left;  
  59.         width: 70px;  
  60.     }  
  61.       
  62.     #menu ul ul ul li  
  63.     {  
  64.         position: relative;  
  65.         left: 100%;  
  66.         top: -30px;  
  67.         display: none;  
  68.     }  
  69.       
  70.     #menu ul li ul li:hover ul li  
  71.     {  
  72.         display: block;  
  73.     }  
  74.           
  75.     </style>  
  76.       
  77. </head>  
  78.   
  79. <body>  
  80.   
  81. <div id="menu">  
  82. <ul>  
  83.     <li>főmenü1  
  84.         <ul>  
  85.             <li><a href="">egy</a></li>  
  86.             <li><a href="">kettő</a></li>  
  87.             <li><a href="">három</a>  
  88.               
  89.                 <ul>  
  90.                     <li><a href="">zöld</a></li>  
  91.                     <li><a href="">piros</a></li>  
  92.                     <li><a href="">zöld</a></li>  
  93.                     <li><a href="">piros</a></li>  
  94.                 </ul>  
  95.                   
  96.             </li>  
  97.         </ul>  
  98.     </li>  
  99.       
  100.     <li>főmenü2  
  101.         <ul>  
  102.             <li><a href="">egy</a></li>  
  103.             <li><a href="">kettő</a></li>  
  104.             <li><a href="">három</a></li>  
  105.             <li><a href="">egy</a>  
  106.               
  107.                 <ul>  
  108.                     <li><a href="">zöld</a></li>  
  109.                     <li><a href="">piros</a></li>  
  110.                     <li><a href="">zöld</a></li>  
  111.                     <li><a href="">piros</a></li>  
  112.                 </ul>  
  113.               
  114.             </li>  
  115.             <li><a href="">kettő</a></li>  
  116.             <li><a href="">három</a></li>  
  117.             <li><a href="">egy</a></li>  
  118.             <li><a href="">kettő</a></li>  
  119.             <li><a href="">három</a></li>  
  120.         </ul>  
  121.     </li>  
  122.   
  123. </ul>  
  124. </div>  
  125.   
  126. </body>  
  127. </html>  
3

Sajnos mégsem jó...

Anonymous · 2005. Okt. 25. (K), 21.13
Eddig jutottam:

http://cssmenu.uw.hu/

Látható, ha a "főmenü2"-nél lenyílik az almenü, majd a legfelső almenüponthoz tartozó almenüt, akkor a mellette lévő almenü egy rész nem reagál semmire firefoxban, IE-ben pedig csak akkor, ha ha közvetlenül a linkre kerül a kurzor.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2.   
  3. <html>  
  4. <head>  
  5.     <title>CSS menü</title>  
  6.       
  7.     <style type="text/css">  
  8.       
  9.     body  
  10.     {  
  11.         behavior: url(csshover.htc);  
  12.         background: #ff9900;  
  13.     }  
  14.       
  15.     #menu  
  16.     {  
  17.         position: absolute;  
  18.     }  
  19.       
  20.     #menu a  
  21.     {  
  22.         display: block;  
  23.         background: gray;  
  24.         font-family: arial;  
  25.         text-decoration: none;  
  26.         font-size: 12px;  
  27.         color: black;  
  28.         height: 30px;  
  29.     }  
  30.       
  31.     #menu a:hover  
  32.     {  
  33.         background: white;  
  34.         color: black;  
  35.     }  
  36.       
  37.     #menu ul ul  
  38.     {  
  39.         display: none;  
  40.     }  
  41.       
  42.     #menu ul ul ul   
  43.     {  
  44.         position: absolute;  
  45.         width: 70px;  
  46.     }  
  47.       
  48.     #menu ul li:hover ul  
  49.     {  
  50.         display: block;  
  51.     }  
  52.       
  53.       
  54.     #menu ul  
  55.     {  
  56.         margin: 0;  
  57.         padding: 0;  
  58.         list-style: none;  
  59.     }  
  60.       
  61.     #menu ul li  
  62.     {  
  63.         float: left;  
  64.         width: 70px;  
  65.     }  
  66.       
  67.     #menu ul ul ul li  
  68.     {  
  69.         position: relative;  
  70.         left: 100%;  
  71.         top: -30px;  
  72.         display: none;  
  73.     }  
  74.       
  75.     #menu ul li ul li:hover ul li  
  76.     {  
  77.         display: block;  
  78.     }  
  79.           
  80.     </style>  
  81.       
  82. </head>  
  83.   
  84. <body>  
  85.   
  86. <div id="menu">  
  87. <ul>  
  88.     <li>főmenü1  
  89.         <ul>  
  90.             <li><a href="">egy</a></li>  
  91.             <li><a href="">kettő</a></li>  
  92.             <li><a href="">három</a>  
  93.               
  94.                 <ul>  
  95.                     <li><a href="">zöld</a></li>  
  96.                     <li><a href="">piros</a></li>  
  97.                     <li><a href="">zöld</a></li>  
  98.                     <li><a href="">piros</a></li>  
  99.                 </ul>  
  100.                   
  101.             </li>  
  102.         </ul>  
  103.     </li>  
  104.       
  105.     <li>főmenü2  
  106.         <ul>  
  107.             <li><a href="">egy</a>  
  108.               
  109.                 <ul>  
  110.                     <li><a href="">zöld</a></li>  
  111.                     <li><a href="">piros</a></li>  
  112.                     <li><a href="">zöld</a></li>  
  113.                     <li><a href="">piros</a></li>  
  114.                 </ul>  
  115.               
  116.             </li>  
  117.             <li><a href="">kettő</a></li>  
  118.             <li><a href="">három</a></li>  
  119.             <li><a href="">négy</a>  
  120.               
  121.                 <ul>  
  122.                     <li><a href="">zöld</a></li>  
  123.                     <li><a href="">piros</a></li>  
  124.                     <li><a href="">zöld</a></li>  
  125.                     <li><a href="">piros</a></li>  
  126.                 </ul>  
  127.               
  128.             </li>  
  129.             <li><a href="">öt</a></li>  
  130.             <li><a href="">hat</a></li>  
  131.             <li><a href="">hét</a></li>  
  132.             <li><a href="">nyolc</a></li>  
  133.             <li><a href="">kilenc</a></li>  
  134.         </ul>  
  135.     </li>  
  136.   
  137. </ul>  
  138. </div>  
  139. <br><br>dfdsfdsfsdfsdf  
  140.   
  141. </body>  
  142. </html>  
Örülnék ha valaki tudna segíteni, mert már nekem nincs ötletem.

Köszönöm előre is!
4

Próbáld meg így...

nAgYu · 2005. Okt. 27. (Cs), 10.41
... mert nálam ez működik IE és FF alatt is (mással még nem próbáltam...)
A kódból csak a <head>...</head> szakaszt másolom ide, a többi úgyis ugyanaz.
  1. ...  
  2. <head>  
  3. <title>CSS menü</title>  
  4.       
  5. <style type="text/css">  
  6.           
  7. *  
  8. {  
  9.   margin: 0;  
  10.   padding: 0;  
  11. }  
  12.   
  13. body  
  14. {  
  15.   background-color: #ff9900;  
  16.   color: black;  
  17.   position: relative;  
  18. }  
  19.   
  20. #menu  
  21. {  
  22.   position: absolute;  
  23.   top: 10px;  
  24.   left: 10px;  
  25. }  
  26.   
  27. #menu ul  
  28. {  
  29.   list-style-type: none;  
  30. }  
  31.   
  32. #menu ul li  
  33. {  
  34.   float: left;  
  35.   width: 70px;  
  36. }  
  37.   
  38. #menu ul li ul li  
  39. {  
  40.   float: none;  
  41.   position: relative;  
  42. }  
  43.       
  44. #menu a, #menu a:link, #menu a:visited, #menu a:active  
  45. {  
  46.   font-family: arial, helvetica, sans-serif;  
  47.   text-decoration: none;  
  48.   font-size: 12px;  
  49.   line-height:28px;  
  50.   height: 30px;  
  51.   vertical-align: middle;  
  52.   display: block;  
  53.   background-color: gray;  
  54.   color: black;  
  55. }     
  56.   
  57. #menu a:hover  
  58. {  
  59.   background-color: white;  
  60. }  
  61.   
  62. #menu ul li ul, #menu ul li ul li ul, #menu ul li:hover ul li ul  
  63. {  
  64.   display: none;  
  65. }  
  66.   
  67. #menu ul li:hover ul  
  68. {  
  69.   display: block;  
  70. }  
  71.   
  72. #menu ul li ul li:hover ul  
  73. {  
  74.   display: block;  
  75.   position: absolute;  
  76.   top: 0;  
  77.   left: 70px;  
  78. }  
  79.   
  80. </style>  
  81.   
  82. <!--[if lt IE 7]>  
  83.   
  84.   <script src="ie7-standard-p.js" type="text/javascript">  
  85.   </script>  
  86.   
  87. <style type="text/css">  
  88.   
  89.   #menu ul li ul li:hover  
  90.   {  
  91.     margin-bottom: -4px;  
  92.   }  
  93.   
  94. </style>  
  95.   
  96. <![endif]-->      
  97.   
  98. </head>  
  99. ...  
Egy apró változás: én személy szerint Dean Edwards IE7 "csomagját" használom, ez az "ie7-standard-p.js" a forrásban. Egy nagy hátránya van, mint az a kiterjesztéséből is látszik: ha nincs JS, nincs menü sem...


Üdv.:
nAgYu