Dopo aver pacioccato un pochetto sono riuscito a far girare il menu su IE 8 e IE 7. Su IE 7 le scritte "A", "B", ecc... sembrano traslare leggermente e questo non mi piace affatto ma il problema più grave é la compatibilitò con IE 6 ed IE 5.5 che vorrei aggiungere al layout.

Qualcuno mi da una pulita al CSS e mi spiega come allargare la compatibilità ad IE 5.5 e IE 6?

Attualmente per il layout ho un solo commento condizionale per IE 5.5 e non mi dispiacerebbe continuare questa filosofia ma se non si può pazienza.

Vorrei usare solo il CSS, no javascript od altro!


codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<style type="text/css">
html, body {
	margin:0px;
	padding:0px;
	text-align:center;
}
div#layout {
	clear:both;
	text-align:left;
	width:960px;
	height:auto;
	margin:10px auto;
	border-width:0px;
	font:italic 90% arial;
}
div#tot {
	float:left;
	width:960px;
	height:30px;
	padding:0px;
	margin:0px;
	border-width:0px;
	background-color:green;
}
div#1 {
	float:left;
	width:10px;
	height:30px;
	padding:0px;
	margin:0px;
	border-width:0px;
}
div#2 {
	float:left;
	position:relative;
	width:940px;
	height:30px;
	padding:0px;
	margin:0px;
	border-width:0px;
}
div#3 {
	float:left;
	width:10px;
	height:30px;
	margin:0px;
	padding:0px;
	border-width:0px;
}
ul#contenitore, ul#contenitore li, ul#contenitore ul, ul#contenitore ul li {
	margin:0px;
	padding:0px;
	list-style-type:none;
}
ul#contenitore {
	height:30px;
	line-height:30px;
	margin-left:10px;
	background:transparent;
	color:#FFFFFF;
}
ul#contenitore a {
	display:block;
	padding:0px 15px;
	text-decoration:none;
	color:#FFFFFF;
}
ul#contenitore li {
	float:left;
	position:relative;
}
ul#contenitore li li {
	float:none;
	line-height:23px;
	display:block;
}
ul#contenitore ul {
	position:absolute;
	top:29px;
	left:-9999px;
	width:220px;
	background:#FFFFFF;
	color:#FFFFFF;
}
ul#contenitore ul {
	padding:12px 0px;
	border:1px solid black;
}
ul#contenitore li li a {
	height:25px;
}
ul#contenitore ul, ul#contenitore li li a {
	background-color:#FFFFFF;
	color:blue;
}
ul#contenitore li:hover, ul#contenitore a:hover {
	background-color:red;
	color:#FFFFFF;
}
ul#contenitore li:hover ul.primo_livello {
	left:-5px;
	z-index:100;
}
ul#contenitore li.secondo_menu:hover ul.secondo_livello {
	top:-12px;
	left:220px;
	z-index:200;
}
</style>
<body>
<div id="layout">
<div id="tot">
    <div id="1"></div>
    <div id="2">
      <ul id="contenitore">[*]A[*]B
          <ul class="primo_livello">[*]b1[*]b2[*]b3[*]b4[/list]
        [*]C
          <ul class="primo_livello">[*]c1[*]c2[*]c3
            <li class="secondo_menu">c4
              <ul class="secondo_livello">[*]c4_1[*]c4_2[/list]
            [/list]
        [*]D
          <ul class="primo_livello">[*]d1[*]d2[/list]
        [*]E
          <ul class="primo_livello">[*]e1[*]e2[/list]
        [*]F
          <ul class="primo_livello">[*]f1[*]f2[/list]
        [*]G[*]H
          <ul class="primo_livello">[*]h1[*]h2[/list]
        [/list]
    </div>
    <div id="3"></div>
  </div>
  </div>
</body>
</html>