I am trying to create a menu with the following HTML structure:
<ul>
<li id="btnHome"><a href="#">Link One</a></li>
<li id="btnAbout"><a href="#">Link Two</a></li>
<li id="btnContact"><a href="#">Link Three</a></li>
<li id="btnLinks"><a href="#">Link Four</a></li>
</ul>
Along with this, I have defined some CSS styles for the menu:
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
#nav {
background: #999;
padding: 2%;
}
#nav ul li {
float: left;
margin-right: 2%;
}
However, when using float: left for IE6 and 7 to display the menu items in a single row, it also affects the styling of the #nav div, causing the menu items not to appear inside it anymore.
How can I resolve this issue specifically for IE6 and 7?
It should be noted that I am already using display: inline-block for modern browsers and it is working fine.