Question

I have designed a Navigation Menu, it work fine on Chrome and Firefox but it don’t appear to work properly on IE7 and IE8.. how to fix this?

Note: it is not a dropdown functionality.

<div class="nav-block">
                <ul id="nav">
                <li><a class="active" href="/">Home</a></li>

                <li>
                <a href="/">Category</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li>
                <a href="/">Accounts</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li><a href="/">Logout</a></li>
            </ul>
</div>

CSS:

<style>
.nav-block{
    background-color:black;
    height: 45px;
}

#nav {
    padding:12px;
    list-style:none;
}

#nav li{
    display:inline;
    margin:0 1px 0 -1px;
    padding:3px 15px;
    float:left;
    font-size:14px;
}

#nav a {
    background-color:white;
    color:#C51721;
    padding:10px;
    text-decoration: none;
}

#nav .subnav {
    padding:0px;
    list-style:none;
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    color:#000000;
    margin-top:9px;
    margin-left:-2px;
    background-color:white;
}

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
}

#nav .subnav li a {
    padding:3px;
    padding-left:10px;
    display:block;
    background-color:white;
    color:#C51721;
    text-decoration: none;
    border-bottom:1px solid #DEDEDE;
}
 </style>

If the code can be improved, let me know. thanks

Answer 1

the height of li in the .subnav is big. It should be the same size as Firefox and Chrome

When I test it, I have the opposite issue : IE7 being too small.

It seems to be because of some margins on the li. To have them all of the same height, I used :

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
    margin:0px;
}

The main issue is that you have an inline element (<li>) with a block element nested inside it (<a>).

You should fix it by changing your <li> to a block element. But then, you’ll have other issue, since you <a> won’t take all the width…

#nav .subnav li {
    padding:0px;
    float: none;
    color:#000000;
    display:block;
    width:130px;
}

This should get you close to what you want.