Hi,
I'm working with a downloaded template which I've edited a bit to my personal style. However after editing some parts of the CSS the menu it doesn't look right anymore in IE8. It works fine with Firefox and Chrome however.
Below is the code:
Code:
/* @override http://demotemplates.joomlashack.com/optimus/templates/js_optimus/css/nav.css */
/* @group NAVBAR */
#nav {height:42px;z-index:500;float:none;}
#nav ul {list-style:none;line-height:42px;padding-top:0px;}
#nav ul li {position:relative;margin:0;}
#nav a {text-decoration:none;display:block;cursor:pointer;height:42px;padding:0px 0px 0px 7px;margin:0px 0px 0px 8px;}
#nav li a:hover {height:42px;}
#nav li {float:left;padding:0;padding:0px 7px 0px 0px;}
#nav ul ul a {background:none;}
#nav ul ul {border:none;}
#nav li li a {font-weight:normal;padding:0;margin:0;height:26px;line-height:26px;text-indent:5px;}
#nav ul ul a {display:block;text-decoration:none;text-transform:none;}
#nav li li {padding:0;background:none;}
#nav li li {float:left;padding:0;}
#nav li:hover, #nav li.iehover {left:0;}
#nav ul ul a:hover {background:none;height:26px;line-height:26px;padding:0;margin:0;}
#nav li ul {position:absolute;left:-999em;height:auto;font-weight:normal;border-width:0;margin:0;padding:0;border-bottom:none;}
#nav li:hover,#nav li.iehover {position: static;}
/* Pro */
#nav ul li ul li a.child,#nav ul li ul li a.child:hover,#nav ul li#current ul li a.child,#nav ul li#current ul li a.child:hover {background:url(../images/arrow_right.gif) 100% 50% no-repeat;}
#nav ul li.active ul li a.child,#nav ul li.haschild.active ul li#current a.child {background:url(../images/arrow_right.gif) 100% 50% no-repeat;}
#nav li:hover ul ul, #nav li:hover ul ul ul,#nav li:hover ul ul ul ul, #nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul ul ul {left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,#nav li li li li:hover ul,#nav li.iehover ul, #nav li li.iehover ul,#nav li li li.iehover ul,#nav li li li li.iehover ul {z-index:100;left:auto;}
#nav ul ul li a {border-right:none;}
#nav a {text-transform:none;}
#nav ul li:hover li:hover,#nav ul li#current ul li a,#nav ul li#current ul li,#nav ul li#current ul li a:hover,#nav ul li#current ul li.hover, #nav li.haschild:hover li span,#nav li.haschild.iehover li span,#nav li.iehover li span,#nav ul li li a,#nav ul li.haschild li#current a,#nav ul li.haschild li#current,#nav ul li.iehover li.iehover, #nav ul li ul li a:hover,#nav ul li ul li:hover,#nav ul li ul li.iehover {background-image:none;}
#nav li ul ul {margin: -26px 0 0 173px;}
/* @end */
I've edited line 3, height value was 52px now 42px and line 4, padding top was 10px now 0px
Before this edit it all looked fine in all browsers. After the edit it looks like this in IE8:
And the menu in Firefox or Chrome:
What am I doing wrong?
Before you post, read our: 
