# Solved: CSS drop down menu not showing right in IE but not in Firefox



## POSERA (Feb 23, 2009)

I have programmed a drop down menu in css and it works fine in Internet Explorer but when I check it with firefox it is a mess. I have tried everything to get it right and it doesnt work out. The site is http://www.dmxledlights.com/ and the css is the following:


```
#mainNav {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 711px;
    float: right;
    height: 31px;
}
/* NAV MENU STYLES */
ul#nav1 {
    margin: 0;
    list-style: none;
    height: 31px;
    padding-top: 1px;
    padding-right: 0;
    padding-bottom: 1px;
    padding-left: 0;
    float: left;
}
ul#nav1 li {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    float: left;
}
ul#nav1 li a:link, ul#nav1 li a:visited {
    display: block;
    line-height: 31px;
    text-decoration: none;
    font-family: Arial;
    font-size: 12px;
    background-image: url(../images/boton_negro.jpg);
    height: 31px;
    width: 129px;
    text-align: center;
    color: #fff;
}
ul#nav1 li.first a:link, ul#nav1 li.first a:visited {
    background-image: url(../images/boton_negro_i.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 80px;
}
ul#nav1 li.activeFirst a:link, ul#nav1 li.activeFirst a:visited {
    background-image: url(../images/boton_azul_i.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 80px;
}
ul#nav1 li.active a:link, ul#nav1 li.active a:visited {
    background-image: url(../images/boton_azul.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 129px;
}
ul#nav1 li.last a:link, ul#nav1 li.last a:visited {
    background-image: url(../images/boton_negro_f.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 115px;
}
ul#nav1 li:hover a, ul#nav1 li a:hover, ul#nav1 li a:active {
    background: url(../images/boton_azul.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 129px;
}
ul#nav1 li.activeFirst:hover a, ul#nav1 li.activeFirst a:hover, ul#nav1 li.activeFirst a:active {
    background: url(../images/boton_azul_i.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 80px;
}
ul#nav1 li.active:hover a, ul#nav1 li.active a:hover, ul#nav1 li.active a:active {
    background: url(../images/boton_azul.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 129px;
}
ul#nav1 li.last:hover a, ul#nav1 li.last a:hover, ul#nav1 li.last a:active {
    background: url(../images/boton_azul_f.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 115px;
}
/* NAV SUBMENU STYLES */
ul#nav1 li ul.nav2 {
    margin: 0;
    list-style: none;
    display: none;
    width: 200px;
    position: absolute;
    top: 31px;
    left: 1px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom: 0;
    padding-left: 1px;
}
ul#nav1 li:hover ul.nav2 {
    display: block;
}
ul#nav1 li ul.nav2 li {
    width: 200px;
    clear: left;
    width: 200px;
}
ul#nav1 li ul.nav2 li a:link, ul#nav1 li ul.nav2 li a:visited {
    clear: left;
    width: 200px;
    position: relative;
    z-index: 1000;
    background-image: url(../images/rolover_back.png);
    font-family: Arial;
    font-size: 12px;
    color: #000;
    height: 29px;
    text-align: left;
    padding: 0;
    text-indent: 10px;
    background-repeat: repeat-x;
}
ul#nav1 li ul.nav2 li:hover a, ul#nav1 li ul.nav2 li a:active, ul#nav1 li ul.nav2 li a:hover {
    clear: left;
    padding: 0;
    width: 200px;
    position: relative;
    z-index: 1000;
    color: #fff;
}
```
The HTML is the following:

```
[LIST]
        [*][URL=#][B]Home[/B][/URL]
        [*][URL][B]About Us[/B][/URL]
        [*][URL=#][B]Outdoor LED Lighting[/B][/URL]
        [LIST]
          [*][URL=#]SP90 LED Street Lights[/URL]
          [*][URL=#]LU1 LED Street Lights[/URL]
          [*][URL=#]LU2 LED Street Lights[/URL]
          [*][URL=#]LU4 LED Street Lights[/URL]
          [*][URL=#]LU6 LED Street Lights[/URL]
          [*][URL=#]LU8 LED Street Lights[/URL]
          [*][URL=#]SD2 LED Tunnel Lights[/URL]
          [*][URL=#]Solar LED Street Lights[/URL]
          [*][URL=#]LED Traffic Lights[/URL]
          [*][URL=#]LED Wall Washers[/URL]
        [/LIST]
        [*][URL=#][B]Indoor LED Lighting[/B][/URL]
        [LIST]
          [*][URL=#]MR16 LED Light Bulbs[/URL]
          [*][URL=#]SP50 LED Light Bulbs[/URL]
          [*][URL=#]SP70 LED Light Bulbs[/URL]
          [*][URL=#]SP80 LED Light Bulbs[/URL]
          [*][URL=#]SP80B LED Light Bulbs[/URL]
          [*][URL=#]T5 Retrofit LED Light Tubes[/URL]
          [*][URL=#]T8 Retrofit LED Light Tubes[/URL]
        [/LIST]
        [*][URL=#][B]Fluorescent Lighting[/B][/URL]
        [LIST]
          [*][URL=#]Fluorescent Light Bulbs[/URL]
          [*][URL=#]Compact Fluorescent Light Bulbs[/URL]
        [/LIST]
        [*][URL=#][B]Contact Us[/B][/URL]
      [/LIST]
```
Can someone help me out with finding the mistake?? I am getting nuts of not getting it right

Thank youv ery much in advance

greetings,

Richard


----------



## tomdkat (May 6, 2006)

What have you tried so far to fix this?

This menu is wrong in Opera and Google Chrome, not just Firefox.

Peace...


----------



## POSERA (Feb 23, 2009)

Yes, the mistake must be in the CSS because the html is right. I have also seperated the html from the rest of the page, and it still shows the mistake in all browsers but not in IE:

http://www.dmxledlights.com/test_menu.html

If I just place one level of the menu which is the main one it shows right:

http://www.dmxledlights.com/test_menu2.html

I have checked if it could be the floating and position but I think I am getting confused there.


----------



## tomdkat (May 6, 2006)

Thanks for the info and thanks for the test cases. 

I'm not sure but I'm thinking your analysis of the problem being with the CSS vs the HTML might be reversed.

Here is the CSS style rule in question:


```
ul#nav1 li ul.nav2
```
At least I think that's the rule. 

Now, where is that element in the HTML? It's NOT there! 

Here is the HTML:

```
<ul id="nav1">
        <li class="activeFirst"><a href="#" title="Home"><strong>Home</strong></a></li>
        <li><a href="" title="About Us"><strong>About Us</strong></a></li>
        <li><a href="#" title="Outdoor LED Lighting"><strong>Outdoor LED Lighting</strong></a></li>
        <ul class="nav2">
          <li><a href="#">SP90 LED Street Lights</a></li>
```
There is no unordered list with id "nav1" with a list-item element that contains an unordered list of class "nav2" in the above HTML. Instead, the above HTML has an unordered list with id "nav1" with a list-item element AND an unordered list of class "nav2", which is a "peer child" element of the list-item elements.

So, if you're wanting to nest the "nav2" unordered lists correctly, you will need to do it like this:

```
<ul id="nav1">
        <li class="activeFirst"><a href="#" title="Home"><strong>Home</strong></a></li>
        <li><a href="" title="About Us"><strong>About Us</strong></a></li>
        <li><a href="#" title="Outdoor LED Lighting"><strong>Outdoor LED Lighting</strong></a> [b][color=red]<!-- <<<*** Notice this list-element is NOT closed yet! -->[/color][/b]
        <ul class="nav2">
          <li><a href="#">SP90 LED Street Lights</a></li>
          <li><a href="#">LU1 LED Street Lights</a></li>
          <li><a href="#">LU2 LED Street Lights</a></li>
          <li><a href="#">LU4 LED Street Lights</a></li>
          <li><a href="#">LU6 LED Street Lights</a></li>
          <li><a href="#">LU8 LED Street Lights</a></li>
          <li><a href="#">SD2 LED Tunnel Lights</a></li>
          <li><a href="#">Solar LED Street Lights</a></li>
          <li><a href="#">LED Traffic Lights</a></li>
          <li><a href="#">LED Wall Washers</a></li>
        </ul>
[b][color=red]</li>[/color][/b]
```
I haven't actually tried this with your test case but give it a whirl and see what it does. If it does work, that means IE was wrong in the way it rendered it originally since IE didn't adhere to the DOCTYPE specified.

Peace...


----------



## POSERA (Feb 23, 2009)

Hi tomdkat, yes youw ere right. When starting the second level i shouldnt have closed the list [*], so it was a mistake of the html.

The right one will be this:


```
[LIST]
    [*][URL=#][B]Home[/B][/URL]
    [*][URL][B]About Us[/B][/URL]
    [*][URL=#][B]Outdoor LED Lighting[/B][/URL]
      [LIST]
        [*][URL=#]SP90 LED Street Lights[/URL]
        [*][URL=#]LU1 LED Street Lights[/URL]
        [*][URL=#]LU2 LED Street Lights[/URL]
        [*][URL=#]LU4 LED Street Lights[/URL]
        [*][URL=#]LU6 LED Street Lights[/URL]
        [*][URL=#]LU8 LED Street Lights[/URL]
        [*][URL=#]SD2 LED Tunnel Lights[/URL]
        [*][URL=#]Solar LED Street Lights[/URL]
        [*][URL=#]LED Traffic Lights[/URL]
        [*][URL=#]LED Wall Washers[/URL]
      [/LIST]

    [*][URL=#][B]Indoor LED Lighting[/B][/URL]
      [LIST]
        [*][URL=#]MR16 LED Light Bulbs[/URL]
        [*][URL=#]SP50 LED Light Bulbs[/URL]
        [*][URL=#]SP70 LED Light Bulbs[/URL]
        [*][URL=#]SP80 LED Light Bulbs[/URL]
        [*][URL=#]SP80B LED Light Bulbs[/URL]
        [*][URL=#]T5 Retrofit LED Light Tubes[/URL]
        [*][URL=#]T8 Retrofit LED Light Tubes[/URL]
      [/LIST]

    [*][URL=#][B]Fluorescent Lighting[/B][/URL]
      [LIST]
        [*][URL=#]Fluorescent Light Bulbs[/URL]
        [*][URL=#]Compact Fluorescent Light Bulbs[/URL]
      [/LIST]

    [*][URL=#][B]Contact Us[/B][/URL]
  [/LIST]
```
Thanks a lot for helping me out, I really appreciate it!!! After all that time it was something very easy. But of course a second opinion was missing hehehe.

Greetings,

Richard


----------



## tomdkat (May 6, 2006)

Coolio! 

EDIT: By the way, where did you find the navigation menu?

Peace...


----------



## POSERA (Feb 23, 2009)

A friend of mine made it in javascript and fireworks. So I decided to convert it into css...

You like it??


----------



## tomdkat (May 6, 2006)

Yeah,it's snazzy looking. You wrote the CSS styling for it yourself? If so, I'm impressed! :up:

Peace...


----------



## POSERA (Feb 23, 2009)

Thanks... Yes the CSS I wrote myself. But I think the background of the dropdown menu does it. I dont know how he made it in fireworks cause I really suck with that, but the background file is called rolover_back.png that is making it look transparent.

I also had some troubles before with the flash thats below the drop down menu, it didnt show completely. But I got rid of it with adding a parameter to the flash wmode=transparent. That was the first problem I was facing before I found out it didnt work in firefox.


----------

