CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menumenu
user1386906
user1386906

Reputation: 1179

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;
 }

Upvotes: 1

Views: 14467

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

HI i have some changing in you css 

   .menu-holder > ul > li:hover > a {
         background-color: #025179;
     }


     .menu-holder ul li ul {
         float: none;
         display: none;
         position: absolute;
    margin:0;     top: 30px;padding:0;
         left: 10;
         white-space: nowrap;font-size:0;
     }

     .menu-holder ul li ul li {
         position: static;
         float: none;
         display: inline-block;
         padding:0;
         margin:0px;font-size:14px;
         background-color: #025179;
     }
     .menu-holder ul li ul li a {
         display:block;
         margin: 0 0px 0 0px;
         padding: 0 10px;
        line-height:30px;
         font-weight: normal;
         -webkit-border-radius: 0;
         border-radius: 0;
     }

Demo

Upvotes: 2

sven
sven

Reputation: 785

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/

Upvotes: 4

Related Questions