Pure CSS Drop-down Menu Not Displaying Properly in IE8

Question

My pure css drop-down menu works in all major browsers except IE8. There are two issues.

1) The background color of menu doesn't display until the mouse rolls over one of the menu items. (see photo in link below)

http://www.searchtransparency.net/stackoverflow/2.jpg

2) If the menu is exited from the parent link (treatments) it leaves a shortened version of the background displaying. (see photo in link below)

http://www.searchtransparency.net/stackoverflow/1.PNG

CSS:

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    z-index:3;
}
.menu {
    height: 53px;
    width: 994px;
}
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 38px;
    padding-top: 15px;
}
.menu li a {
    display: block;
    padding-left: 44px;
    padding-right: 44px;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 0px;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color:#CCC; }
.menu ul {
    position: absolute;
    top: 53px;
    left: 0;
    opacity: 0;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
    -webkit-box-shadow: 0px 0px 5px 0px #333;
    box-shadow: 0px 0px 5px 0px #333;
    background-color: #222;
    padding-bottom: 15px;
    visibility: hidden;
    behavior: url(PIE.htc);
}
.menu li:hover > ul {
    opacity: 1;
    visibility: visible;
}
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.menu li:hover > ul li {
    height: 25px;
    overflow: visible;
}
.menu ul li a {
    width: 175px;
    margin: 0;
    font-size: 12px;
    text-shadow: none;
    border: none;
    padding-left: 25px;
    height: 20px;
    padding-top: 5px;
}
.menu ul li:last-child a { border: none; }
.menu li li:hover > a {
    background-color: #666;
}

HTML:

<ul class="menu">
    <li><a href="index.html" title="Home"><img src="images/icon-home.png" alt="Home" width="18" height="18" border="0"></a></li>
    <li><a href="meet-the-doctor.html" title="Meet The Doctor">Meet The Doctor</a></li>
    <li class="icon-dropdown-arrow"><a href="#" title="Treatments">Treatments</a>

        <ul>
            <li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:10px;">Skin Resurfacing</li>
            <li><a href="fraxel-restore.html" title="Fraxel Restore">Fraxel&reg; Restore</a></li>
            <li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Skin Tightening</li>
            <li><a href="thermage.html" title="Thermage">Thermage&reg;</a></li>
            <li><a href="refirme-photo-rejuvenation.html" title="Refirme Photo-Rejuvenation">Refirme&reg; Photo-Rejuvenation</a></li>
            <li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Cellulite Treatments</li>
            <li><a href="lpg-lipomassage.html" title="LPG Lipomassage">LPG Lipomassage&trade;</a></li>
            <li><a href="velashape.html" title="VelaShape">VelaShape&trade;</a></li>
            <li><a href="thermage.html" title="Thermage">Thermage&reg;</a></li>
            <li><a href="ionithermie-treatment.html" title="Ionithermie Treatment">Ionithermie Treatment</a></li>
            <li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Injectibles</li>
            <li><a href="dermal-fillers.html" title="Dermal Fillers">Dermal Fillers</a></li>
            <li><a href="botox-cosmetic.html" title="Botox Cosmetic">Botox&reg; Cosmetic</a></li>
            <li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Other</li>
            <li><a href="laser-hair-removal.html" title="Laser Hair Removal">Laser Hair Removal</a></li>
            <li><a href="skin-treatments.html" title="Skin Treatments (Face &amp; Body)">Skin Treatments (Face &amp; Body)</a></li>
            <li><a href="skin-rejuvenation.html" title="Skin Rejuvenation">Skin Rejuvenation</a></li>
            <li><a href="plastic-surgery.html" title="Plastic Surgery">Plastic Surgery</a></li>
            <li><a href="massage.html" title="Massage">Massage</a></li>
        </ul>

    </li>
    <li><a href="specials.html" title="Specials">Specials</a></li>
    <li><a href="reviews.html" title="Reviews">Reviews</a></li>
    <li><a href="contact.html" title="Contact">Contact</a></li>
</ul>

Code on JsFiddle.net

You should leave some code chunks. People could have a hard time helping out based on those images alone. — Marko Francekovic, Nov 14 '12 at 17:32

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

As i remember IE understand :hover only just for "a" tag.
:last-child doesn't support too, question about :last-child

edited May 23 '17 at 11:43

Community

1
1

answered Nov 14 '12 at 17:52

fine

98
7

I think IE8 supports :hover for other elements, but it doesn't support :last-child. – Nov 14 '12 at 17:56
Yes, you are right, since IE8 :hover for other elements is working. My fault. – fine Nov 14 '12 at 18:00

Pure CSS Drop-down Menu Not Displaying Properly in IE8

1 Answers1