I'm currently developing a dynamic side menu using CSS and HTML. The menu functions perfectly in all browsers except for Internet Explorer. In IE, the nested lists that create the submenu appear about 50 pixels too far to the right, causing a gap between the sub and main menus. You can find the menu on the left side of this page.
Below is the code snippet:
div.sidemenu{width:200px;}
div.sidemenu ul{background:#EBEBEB;list-style:none;margin:0;padding:0;width:200px;}
div.sidemenu li{float:none;font-size:1.2em;}
div.sidemenu li a{color:#333333;display:block;line-height:35px;text-align:left;text-decoration:none;margin:0px;padding:5px;text-align:left;text-decoration:none}
div.sidemenu li a:hover, .sidemenu ul li:hover a{background: #cccccc url('images/hover.gif') bottom center no-repeat;color:#333333;text-decoration:none;}
div.sidemenu li ul{background:#EBEBEB;display:none;height:auto;padding:0px;margin-left:200px;margin-top:-32px;border:0px;position:absolute;width:220px;z-index:200;/*top:1em;/*left:0;*/}
div.sidemenu li:hover ul{display:block;}
div.sidemenu li li {background:url('images/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0px;padding:0px;width:220px;font-size:1.1em;}
div.sidemenu li:hover li a{background:none;}
div.sidemenu li ul a{display:block;margin:0px;padding:0px 10px 0px 15px;text-align:left;}
div.sidemenu li ul a:hover, .sidemenu li ul li:hover a{background:#cccccc url('images/hover_sub.gif') center left no-repeat;border:0px;color:#333333;text-decoration:none;}
div.sidemenu p{clear:left;}
div.sidemenu img {padding:0px 15px 5px 2px;width:25px;height:25px;}
<div class="sidemenu"><
<ul><
<li><a href="#"><img src="/icon_excel_small.jpg"><span>Excel Training</span></a><
<ul><
<li><a href="#"><span>Basic</span></a></li><
<li><a href="#"><span>Intermediate</span></a></li><
<li><a href="#"><span>Advanced</span></a></li><
</ul><
</li><
<li><a href="#"><img src="/icon_access_small.jpg"><span>Access Training</span></a><
<ul><
<li><a href="#"><span>Basic</span></a></li><
<li><a href="#"><span>Intermediate</span></a></li><
<li><a href="#"><span>Advanced</span></a></li><
</ul><
</li><
</ul><
</div><
Your assistance is greatly appreciated. Steven