I'm having serious issues with IE, I have a simple menu which shows correctly in Firefox and Chrome, but IE is a pain in the ass..
It seems that IE doesn't show the <li> tag properly, so my dropdown menu doesn't work in IE.
Can someone help me out?
This is my JsFiddle: http://jsfiddle.net/PE597/
This is the complete code for the menu, if you copy - paste this then you could see what I mean.
<style type="text/css">
#cssmenu{
border-bottom:1px solid #efefcf;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
color:8e8e8e;
width:1000px;
clear:both;
}
#cssmenu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 8px 0px 8px;
display: inline;
}
#cssmenu li a{
color:#000000;
*display:inline-block;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
display: inline;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
display: inline;
}
#cssmenu li ul{
background:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:175;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
padding:0px;
width:225px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
text-align:left;
width:200px;
}
#cssmenu li ul a:hover{
background:#f7cab9;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
width:125px;
float:left;
}
#cssmenu p{
}
#cssmenu .active > a{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
/** breadcrumb **/
ul.sf-menu, ul.sf-menu ul{display:block;margin:0;padding:0}
ul.sf-menu li{padding:0;list-style:none;margin:0;padding:0px 28px;float:left; display:inline;}
ul.sf-menu li.first{padding-left:0px}
ul.sf-menu a{font-size:12px;color:black;display:block;text-transform:uppercase}
ul.sf-menu ul{position:absolute;top:35px;width:170px;border:1px solid #626165;padding:10px 0px;background:white}
ul.sf-menu ul a{font-size:12px;text-transform:none;width:150px;padding:2px 10px}
ul.sf-menu ul li{padding:0px;display:block;position:relative;float:none;width:170px}
ul.sf-menu ul a:hover, ul.sf-menu ul li.sfHover a{background:#f7cab9}
ul.sf-menu ul ul{position:absolute;z-index:10;left:162px;top:5px}
ul.sf-menu ul li.sfHover ul a{background:none}
ul.sf-menu ul li.sfHover ul a:hover, ul.sf-menu ul li.sfHover ul li.sfHover a{background:#f7cab9}
</style>
<div id="cssmenu">
<?php
echo "<ul class='sf-menu'>
<li class='first'>
<a title='Dashboard' href='index.php?page=dashboard&user=".$_SESSION['username']."'>Dashboard</a>
<ul>
<li class=''>
<a title='Nieuwe call' href='index.php?page=new_call&user=".$_SESSION['username']."'>Nieuwe Call</a>
</li>
</ul>
</li>
<li class=''>
<a title='Contact' href='index.php?page=contact&user=".$_SESSION['username']."'>Contact</a>
</li>
<li class=''>
<a title='Uitloggen' href='index.php?action=logout&user=".$_SESSION['username']."'>Uitloggen</a>
</li>
</ul>";
?>
</div>
