CSS menü, IE hiba sok próba után

CSS menü, IE hiba sok próba után
2012-07-23T09:02:15+02:00
2012-07-23T13:51:05+02:00
2022-11-26T09:41:52+01:00
JonnyK
Sziasztok!
Előre le szeretném szögezni, hogy hobbyhonlapász vagyok... Szóval a problémám az, ami már sok témában előfordult: CSS legördülő menü (netről szedtem és alakítottam át) - FF, Chrome, Safari -> tökéletes, IE-ben pedig egyszerűen kipakolja egymás alá, mint egy formázásmentes listát. Próbáltam a csshover.htc-t (több féle módon is láttam a neten, kipróbáltam őket - de nem működött)
Valaki tudna nekem egy működő módszert javasolni? :)


HTML:
<div class='cssmenu'> <ul> <li class='active'><a href=''><span><strong>FŐMENÜ 1</strong></span></a> <ul> <li><a href=''><span>ALMENÜ 1</span></a></li> <li><a href=''><span>ALMENÜ 2</span></a></li> </ul> <li><a href=''><span><strong>FŐMENÜ 2</strong></span></a> <ul> <li><a href=''><span>ALMENÜ 1</span></a></li> <li><a href=''><span>ALMENÜ 2</span></a></li> <li><a href=''><span>ALMENÜ 3</span></a></li> <li><a href=''><span>ALMENÜ 4</span></a></li> <li><a href=''><span>ALMENÜ 5</span></a></li> </ul> <li><a href=''><span><strong>FŐMENÜ 3</strong></span></a> <li><a href=''><span><strong>FŐMENÜ 4</strong></span></a> <ul> <li><a href=''><span>ALMENÜ 1</span></a></li> <li><a href=''><span>ALMENÜ 2</span></a></li> <li><a href=''><span>ALMENÜ 3</span></a></li> <li><a href=''><span>ALMENÜ 4</span></a></li> </ul> <li><a href=''><span><strong>FŐMENÜ 5</strong></span></a> <li><a href=''><span><strong>FŐMENÜ 6</strong></span></a> <ul> <li><a href=''><span>ALMENÜ 1</span></a></li> <li><a href=''><span>ALMENÜ 2</span></a></li> <li><a href=''><span>ALMENÜ 3</span></a></li> </ul> <li><a href=''><span><strong>FŐMENÜ 7</strong></span></a> </ul> </div>


CSS:
@charset "utf-8"; body { background-color:#FDF8EE; margin:0; } .cssmenu { border:1px solid #645225; background:#FFFFFF; width:982px; margin:auto; } .cssmenu > ul { padding:1px 0; margin:0px; list-style:none; width:980px; height:21px; border:1px solid #645225; font:italic 8pt verdana, arial, helvetica; } .cssmenu > ul li { margin:0; padding:0; display:block; float:left; position:relative; width:140px; } .cssmenu > ul li a:link, .cssmenu > ul li a:visited { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#F4E6CF; color:#7E1212; width:140px; height:13px; } .cssmenu > ul li:hover a, .cssmenu > ul li a:hover, .cssmenu > ul li a:active { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#FAF7F1; color:#7E1212; width:138px; height:13px; border-left:1px solid #645225; border-right:1px solid #645225; } .cssmenu > ul li ul { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#645225; width:138px; position:absolute; top:21px; border-top:none; } .cssmenu > ul li:hover ul { display:block; } .cssmenu > ul li ul li { width:138px; clear:left; width:138px; } .cssmenu > ul li ul li a:link, .cssmenu > ul li ul li a:visited { clear:left; background:#F4E6CF; padding:4px 0; width:138px; border:none; border-bottom:1px solid #645225; position:relative; z-index:1000; } .cssmenu > ul li ul li:hover a, .cssmenu > ul li ul li a:active, .cssmenu > ul li ul li a:hover { clear:left; background:#FAF7F1; padding:4px 0; width:138px; border:none; border-bottom:1px solid #645225; position:relative; z-index:1000; }


Valamint a "forrás" menüben volt mág pár sor, azokat ha kiszedem ha bent hagyom, nincs változás... megmondanátok, mire valók?

.cssmenu > ul li ul li ul.navigation-3 { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #000099; border-left:1px solid #000099; background:#ffffff; z-index:900; } .cssmenu > ul li ul li:hover ul.navigation-3 { display:block; } .cssmenu > ul li ul li ul.navigation-3 li a:link, .cssmenu > ul li ul li ul.navigation-3 li a:visited { background:#000099; } .cssmenu > ul li ul li ul.navigation-3 li:hover a, .cssmenu > ul li ul li ul.navigation-3 li a:hover, .cssmenu > ul li ul li ul.navigation-3 li a:active { background:#0066FF; }
Mutasd a teljes hozzászólást!
Hali!

Nem tudom, hogy használsz-e rendes doctype-ot, de sok problémát megold az IE-nél ha használsz valami rendes doctype-ot.
HTML doctype declaration
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd