Question

I implemented a drop down navigation menus in my blog, but it’s not working properly in IE (any version). It’s working in Chrome and Mozilla fine.

What should be done to make it compatible to IE?

The CSS I added is below:

#mbtnavbar {
/*        background: #B0E2FF;*/
    width: 780 px; 
    color: #FFF; 
        margin: 0 px;
        padding: 0;
        position: relative;
        border-top:5 px solid #960100;
        height:30 px;

}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0 px solid #333;
        border-right:0 px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: ;
    display: block;
   font:normal 13px Trebuchet MS, sans-serif;
   margin: 5; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none;


}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #0066FF;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;



}

#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    /*Width of drop down menu*/
    width: 180px;
    margin: -2px;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #B0E2FF;
    width: 360px;
    color: ;
    display: block;
    font:normal 13px Trebuchet MS, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;


}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #0066FF;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Thanks in advance

Anand

Answer 1

First, fix your errors. The site has 307 validation errors. invalid markup is the #1 reason why pages don’t render properly from one browser to another. Many people (myself included) won’t even look at your CSS until you have valid markup.