PDA

View Full Version : CSS drop down menu showing right in IE but not in Firefox


POSERA
02-23-2009, 08:34 AM
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/ (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:
<div id="mainNav">
<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>
<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>
<li><a href="#" title="Indoor LED Lighting"><strong>Indoor LED Lighting</strong></a></li>
<ul class="nav2">
<li><a href="#">MR16 LED Light Bulbs</a></li>
<li><a href="#">SP50 LED Light Bulbs</a></li>
<li><a href="#">SP70 LED Light Bulbs</a></li>
<li><a href="#">SP80 LED Light Bulbs</a></li>
<li><a href="#">SP80B LED Light Bulbs</a></li>
<li><a href="#">T5 Retrofit LED Light Tubes</a></li>
<li><a href="#">T8 Retrofit LED Light Tubes</a></li>
</ul>
<li><a href="#" title="Fluorescent Lighting"><strong>Fluorescent Lighting</strong></a></li>
<ul class="nav2">
<li><a href="#">Fluorescent Light Bulbs</a></li>
<li><a href="#">Compact Fluorescent Light Bulbs</a></li>
</ul>
<li class="last"><a href="#" title="Contact Us"><strong>Contact Us</strong></a></li>
</ul>
</div>
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

POSERA
02-23-2009, 11:20 PM
I have found out why it is not showing well. There is a mistake in the html, because when you start a second level in the list you should not close the <li> yet...

so it will be like this:

<div id="mainNav">
<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> /**here you dont close the <li> yet**/
<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>
</li> /** here you do close it*//
<li><a href="#" title="Indoor LED Lighting"><strong>Indoor LED Lighting</strong></a>
<ul class="nav2">
<li><a href="#">MR16 LED Light Bulbs</a></li>
<li><a href="#">SP50 LED Light Bulbs</a></li>
<li><a href="#">SP70 LED Light Bulbs</a></li>
<li><a href="#">SP80 LED Light Bulbs</a></li>
<li><a href="#">SP80B LED Light Bulbs</a></li>
<li><a href="#">T5 Retrofit LED Light Tubes</a></li>
<li><a href="#">T8 Retrofit LED Light Tubes</a></li>
</ul>
</li>
<li><a href="#" title="Fluorescent Lighting"><strong>Fluorescent Lighting</strong></a>
<ul class="nav2">
<li><a href="#">Fluorescent Light Bulbs</a></li>
<li><a href="#">Compact Fluorescent Light Bulbs</a></li>
</ul>
</li>
<li class="last"><a href="#" title="Contact Us"><strong>Contact Us</strong></a></li>
</ul>
</div>

So like that it works...

Greetings,


Richard