Gang,
I am trying to get a nav menu to perform a hover color change on
items, but seem to fail when using IE 6.x. I have included sample
code below to give an idea of what I am trying to accomplish:
<style>
..liHeader {
margin: 0px;
padding: 8px 0px 8px 5px;
background: #edf2f2;
font-weight: bold;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
border-left: 1px solid #fff;
border-right: 1px solid #ddd;
cursor: default;
}
#nav, #nav ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: normal;
color: #01518C;
cursor: default;
}
#nav li li {
display: block;
text-decoration: none;
margin: 0px;
background: #edf2f2;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
border-left: 1px solid #fff;
border-right: 1px solid #ddd;
cursor: default;
}
#nav li li { padding: 2px 8px 2px 30px; }
#nav li li:hover { background: #e0e9e9; }
</style>
<ul id="nav">
<li class="liHeader">Topic header 1</li>
<li>
<ul>
<li>submenu option 1</li>
<li>submenu option 2</li>
<li>submenu option 3</li>
</ul>
</li>
<li class="liHeader">Topic header 2</li>
<li>
<ul>
<li>submenu option 1</li>
<li>submenu option 2</li>
<li>submenu option 3</li>
</ul>
</li>
<li class="liHeader">Topic header 3</li>
<li>
<ul>
<li>submenu option 1</li>
<li>submenu option 2</li>
<li>submenu option 3</li>
</ul>
</li>
</ul>
As you can see there are nested ul's because I would like different
formatting to indicate "headers". I don't want to use "a" link's
because some of these options may have a cascading menu associated
with them, so a link would not work. I can get this to work just fine
in FF, but not IE. Does anyone have any suggestions?
Thanks,
Dave