I made a cross browser drop down menu, which works well with IE6.
However, I have problems with other browsers such as IE9, Firefox, Chrome... etc.
How can I modify my HTML and CSS to get the same effect that works in IE6?
Link to JSFiddle
Here is my CSS:
<style>
.bar ul,li{
z-index:999;
margin:0;
padding:0;
}
.bar {
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
.bar a {
padding: 11px;
}
.bar a:visited {
color: #FFFFFF;
font-weight: bold;
text-decoration:none
}
.bar a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration:none
}
.bar a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration:underline
}
#nav0{
list-style:none;
font-weight:bold;
/* Clear floats */
float:left;
width:100%;
}
#nav0 li{
float:left;
margin-right:10px;
position:relative;
}
#nav0 a{
display:block;
padding:5px;
color:#fff;
background:#003399;
text-decoration:none;
}
#nav0 a:hover{
color:#fff;
background:#333;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav0 ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav0 ul li{
padding-top:1px;
float:none;
}
#nav0 ul a{
white-space:nowrap;
}
#nav0 li:hover ul{
left:0;
}
#nav0 li:hover a{
text-decoration:underline;
}
#nav0 li:hover ul a{
text-decoration:none;
}
#nav0 li:hover ul li a:hover{
background:#333;
}
#nav0 li ul li a{
text-align: left;
}
#nav0 li:hover ul li ul {
display:block;
background:#003399;
float:left;
position:relative;
padding-left:20px;
}
#nav0 li ul li:hover ul {
display:block;
background:#003399;
float:left;
position:relative;
padding-left:20px;
}
</style>
Here is my HTML:
<body bgcolor="#79A6A6">
<div id="page" align="center">
<table class="bar" border="0" width="960" cellspacing="0" cellpadding="0" id="table_bar" bgcolor="#003399">
<tr>
<td>
<ul id="nav0">
<li><a><strong>Home</strong> </a>
<ul>
<li><a href="#" title>Top Item 1</a><ul>
<li><a href="#" title="-">Item 1</a></li>
<li><a href="#" title="-">Item 2</a></li>
</ul>
</li>
<li><a href="#" title>Top Item 2</a><ul>
<li><a href="@" title>Item 3</a></li>
<li><a href="@" title>Item 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a><strong>Home</strong> </a>
<ul>
<li><a href="#" title>Top Title</a><ul>
<li><a href="#" title="-">title</a></li>
<li><a href="#" title="-">title123456789</a></li>
</ul>
</li>
<li><a href="#" title>Top Hello</a><ul>
<li><a href="@" title>hello</a></li>
<li><a href="@" title>hello123456789</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</ul>
</td>
<td width="50" style="text-align: left"> </td>
</tr>
</table>
</div>
</body>
In ie6
Home
Top Item 1
Item 1
Item 2
Top Item 2
Item3
Item4
In ie9
Home
Top Item 1
Top Item 2
Item 2
Item 3
Item 4
