Pure html css menu with horizontal submenu. Hover not working properly in IE

Iam working on a pure html/css menu with horizontal submenu, but the hover is not working properly in Internet Explorer. When you hover over the submenu it disappears... In Chrome and Firefox everything works fine.

Here is a jfiddle:

http://jsfiddle.net/te5AU/2/

And here is the code:

<div class="wrapper">
    <div class="menu-holder">
        <ul class="menu">
            <li><a href="#">item 1</a>
            </li>
            <li class="active"><a class="test" href="#">This is the one</a>

                <ul class="submenu">
                    <li><a href="#">Submenu item 1</a>
                    </li>
                    <li><a href="#">Submenu item 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">menu item 3</a>
            </li>
            <li><a href="#">menu item 4</a>
            </li>
        </ul>
    </div>
    <!-- menu-holder end -->
</div>

Here is the css:

 .wrapper {
     width:500px;
     height:500px;
     background:grey;
 }
 .menu-holder ul {
     margin: 2px 0 0px 25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 10px 0 10px;
     margin: 0px 0px 100px 0px;
     border-left: 1px dotted white;
     line-height: 0px;
 }
 .menu-holder ul li:hover > a {
     background-color: #025179;
 }
 .menu-holder ul li:hover ul {
     display: block;
 }
 .menu-holder ul li a {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-weight: bold;
     display: block;
     color: white;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li ul {
     float: none;
     display: none;
     position: absolute;
     top: 40px;
     left: 0px;
     margin: -1px 0 0px 10px;
     padding: 5px 10px 5px 10px;
     white-space: nowrap;
 }
 .menu-holder ul li ul:hover {
     display: block;
 }
 .menu-holder ul li ul li {
     position: static;
     float: none;
     display: inline;
     padding: 5px 10px 5px 10px;
     margin: 0px 0px 0px -10px;
     background-color: #025179;
 }
 .menu-holder ul li ul li a {
     display: inline;
     margin: 0 0px 0 0px;
     padding: 0px 10px 0px 10px;
     font-weight: normal;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holder ul li ul li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li ul li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li:first-of-type {
     border-left: none;
 }

Answers


li is not getting proper height in IE. U should remove

.menu-holder ul li { line-height: 0} //remove the css line-height: 0;

and then try.

Try this: http://jsfiddle.net/te5AU/4/


Need Your Help

Converting 8 bit color into RGB value

colors rgb imagemagick-convert 8bit

I'm implementing global illumination in my game engine with "reflective shadow maps". RSM has i.a. color texture. To save memory. I'm packing 24 bit value into 8 bit value. Ok. I know how to pack i...

How to determine sound recording source

iphone objective-c ipad audio audio-recording

While recording a sound using my iPad app, how can I know if the source of the sound is from the built-in microphone or headphone microphone?