No replies
jfernandes1123
Offline
newbie
New York
Last seen: 8 years 46 weeks ago
New York
Timezone: GMT-5
Joined: 2012-01-06
Posts: 1
Points: 2

I have a dropdown menu made purely with CSS and this code works perfectly on every major browser except IE7 and below. In IE7 the dropdown appears to the right of its parent. I've spent several hours trying to figure it out and am completely stumped. Any help would be greatly appreciated!

Here is the css:

#homepage #top-nav {
    height: 29px;
    padding-top: 3px;
    border-top: 1px solid #c9c9c9;
    background-image: url('http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png');
    background-repeat: repeat-x;
    text-align: center;
/*IE6&7*/*border-bottom: 1px solid #c9c9c9;
}
#homepage #top-nav a {
    color: #083b87;
}
#homepage #top-nav ul {
    list-style: none;
    background-color: white;
}
#homepage #top-nav li {
    display: inline-block;
    padding: 0 16px 8px 16px;
    font-size: 14px;
    zoom: 1; /*required to display inline-block in IE6&7*/
/*IE6&7*/*display: inline; /*required to display inline-block IE6&7*/
/*IE6*/_height: 30px; /*required to display inline-block IE6&7*/
}
#homepage #top-nav li:hover > ul {
    display: block;
}
#homepage #top-nav ul ul {
    display: none;
    position: absolute;
    top: 145px;
    padding: 8px 6px 11px;
    margin-left: -22px;
    border: 1px solid #c9c9c9; 
    background-image: url('http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png');
    background-repeat: repeat-x;
    background-size: 100%;
    z-index: 1000;    
    text-align: left;
/*IE6&7*/filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png', sizingMethod='scale');
/*IE8*/    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://www.doubleverify.com/wp-content/themes/horngroup/images/homepage/top-nav-shading.png', sizingMethod='scale')";
}
#homepage #top-nav ul ul li {
    display: block;
    font-size: 11px;
    line-height: 2em;
}