Подскажите еще пожалуйста.
Вот я сделал раскрывающееся меню на css. Работает так как нужно во всех браузерах кроме ИЕ. В ИЕ список подменю просто улетает вправо. Как эту проблему можно исправить?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
li.menu_list {
background-image: url("/icon/activ_fon_url.png");
background-color: none;
font: 9pt Verdana;
line-height: 1.0;
font-weight: bold;
font-style: normal;
color: #7f7f7f;
border: solid 0px;
/*background-color:#bedfce;*/
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 1px 1px 4px #6fa98b;
}
/* style for style for menu items - hover */
li.menu_list:hover {
background-image: url("/icon/afon_url.png");
background-color: none;
vertical-align: middle;
font: 9pt Verdana;
line-height: 1.0;
font-weight: bold;
font-style: normal;
color: red;
border: solid 0px;
/*background-color:#d6e8f0;*/
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 1px 1px 4px #6fa98b;
}
li.li_m {
opacity: 0.7;
font:8pt Verdana;
font-weight: ;
line-height: 1.0;
color: #827053;
text-align: center;
padding: 0;
width: auto;
height: auto;
background-color:#bedfce;
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 1px 1px 8px #6fa98b;
}
li.li_m:hover {
opacity: 0.8;
background-image: url("/icon/afon_url.png");
font:8pt Verdana;
font-weight: ;
line-height: 1.0;
color: #e46161;
text-align: center;
padding: 0;
width: auto;
height: auto;
background-color:#d6e8f0;
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 2px 2px 8px #6fa98b;
}
td.vz {
width: auto;
height: 24px;
margin: 0px;
}
td.va {
text-align: left;
width: 140px;
height: 24px;
margin: 0px;
}
ul#menu_list ul {
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
}
ul#menu_list li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: auto;
float: left;
position: relative;
}
ul#menu_list li ul {
float: left;
position: absolute;
width: 12em;
}
ul#menu_list li ul {
display: none;
}
ul#menu_list li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="menu_list" >
<a class="menu_link1" href=""><li class="menu_list"><table><tr><td class="vz"> com </td></tr></table></a>
<ul>
</ul>
</li>
<a class="menu_link1" href=""><li class="menu_list"><table><tr><td class="vz"> форум </td></tr></table></a>
<ul>
<a href=""><li class="li_m"><table><tr><td class="va">регистрация</td></tr></table></li></a>
<a href=""><li class="li_m"><table><tr><td class="va">решение</td></tr></table></li></a>
<a href=""><li class="li_m"><table><tr><td class="va">жизнь</td></tr></table></li></a>
</ul>
</li>
<a class="menu_link1" href="#"><li class="menu_list"><table><tr><td class="vz"> раздел №1 </td></tr></table></a>
<ul>
<a href="1"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
<a href="2"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
<a href="3"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
<a href="4"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
</ul>
</li>
</ul>
</body>
</html>