This drop-down menu display properly in Firefox and Safari. In IE, the first level list display vertically instead of horizontally, and the drop-down items display horizontally instead of vertically. Is there a fix to this problem?

I attach the HTML code and CSS rules below. Thanks!

HTML code:

<div id="nav">
<ul class="globalnav">
     <li><a href="/">Home</a></li>
     <li><a href="/currentseason/index.shtml">Current Season</a></li>
     <li>Past Programs
          <ul>
          <li><a href="/pastprog/2008/index.shtml">2008-2009</a></li>
          <li><a href="/pastprog/2007/index.shtml">2007-2008</a></li>
          </ul>
          </li>
     <li><a href="/soundbites/index.shtml">Sound Bites</a></li>
     <li><a href="/tickets/index.shtml">Tickets &amp; Directions</a></li>
     <li><a href="/who/index.shtml">Who Are We?</a>
          <ul>
          <li><a href="/who/emeritus/index.shtml">Board Emeritus</a></li>
          </ul>                 
          </li>
<li><a href="/contact/index.shtml">Contact Us</a></li>
</ul>
</div><!--End navigation-->

CSS rules

#nav ul.globalnav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-top: 1.5px;
    padding-top: 1.5px;
    margin-bottom: 1.5px;
    padding-bottom: 1.5px;
    float: left;
    width: 99%;
    display: inline;
    }

#nav ul.globalnav li {
    display: inline;
    position: relative; /*create containing block for nested ul*/
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    width: auto;
    }

#nav ul.globalnav ul {
    list-style: none;
    display: none; /*hides 2nd level menu items*/
    }

#nav ul.globalnav li:hover ul {
    display: block; /*shows 2nd level of menu on hover*/
    position: absolute;
    margin-left: -5px;
    padding: 0;
    width: auto;
    z-index: 500;  /*rules for keeping the drop-down item on top of the page content*/
    }

#nav ul.globalnav a, #nav ul.globalnav a:hover {
    margin: 0;
    padding: 5px 5px 5px 5px;
    color: #fff000;
    white-space: nowrap;
    display: block;
    } 

#nav ul.globalnav a {
    text-decoration: none;
    }
#nav ul.globalnav a:hover {
    text-decoration: underline;
    background-color: #565656;
    }
#nav ul.globalnav ul a {
    background-color: #565656;
    display: block; 
    }


<!--[if IE]><style type="text/css" media="screen">
body {
    behavior: url(/common/css/csshover3-source.htc);
    font-size: 100%;
    }
#nav {
    float: none;
    }

#nav ul.globalnav li {
    float: left; 
    width: 100%;
    }
#nav ul.globalnav li a {
    height: 1%;
    } 

#nav a {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    }
</style><![endif]-->

2 answers

0
points
This was chosen as the best answer

taking a longer looking at your code and this question as a clue:

In IE, the first level list display vertically instead of horizontally

and then at this:

#nav ul.globalnav li {
    float: left; 
    width: 100%;
    }

in your conditional CSS, I'm thinking that the li's are now floated and as wide as the ul, therefore they will stack vertically.

I suspect you'll need a fixed width for your floated li's for a start.

seeing a live example would allow some experimentation, but I think that's where the issue is.

put a border on the li and look at it in IE and see what's happening.

Answered about 7 years ago by Tony Crockford
  • It worked! Thank you so much! yumook about 7 years ago
0
points

Is the path to csshover3-source.htc relative to the html? That's where I'd start looking.

:)

Answered about 7 years ago by Tony Crockford
  • I made a typo in the question, I have corrected it now. Yes, it is relative to the html. Any idea where else I could start looking? Many thanks! yumook about 7 years ago
  • Is your web server sending the htc file with the correct mime type? see: http://www.hoeben.net/node/33 Tony Crockford about 7 years ago