CODEWITHSUNDEEP
htmlcss
user1512165
user1512165

Reputation: 11

Positioning of nested lists in Internet Explorer

I'm working on a dynamic side menu using just CSS and HTML. The menu works well in every browser except for Internet Explorer, but in IE, the nested lists that make up the submenu are placed about 50 pixels too far to the right, so there is a gap between the sub and main menus. The menu is on the left hand side of this page

http://www.mcstech.net/computer-training/visio/

This is the code.

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>

Thank you for your help. Steven

Upvotes: 1

Views: 447

Answers (2)

Billy Moat
Billy Moat

Reputation: 21050

I think this might help.

On your top level LI elements make them position:relative

On your sub menu UL elements remove the margin-left and add left:200px

Upvotes: 0

Etienne Dupuis
Etienne Dupuis

Reputation: 13786

I stopped fighting with IE. I use this to add a special CSS only for IE. You can remove the 50pixels in there and adjust it for IE.

<!--[if IE]> <link href="/css/ie.css" rel="stylesheet" type="text/css"> <![endif]-->

Upvotes: 3

Related Questions