nav menu without using links

Giganews Newsgroups
Subject: nav menu without using links
Posted by:  hended…@yahoo.com
Date: 12 Mar 2007

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

Replies