Log in

View Full Version : CSS Dropdown menu problem in FIREFOX 3.5


wanovak
10-16-2009, 03:58 PM
My problem is that in Firefox (not IE6, 7, 8 or Opera; surprisingly) on a CSS-styled 3-deep unordered list, Firefox loses focus when going to the third element. That may sound ambiguous; let me elaborate.

Say the first element of Programs, the second is GPEP, and the third is a list of 5 different things. When I hover on GPEP, the third menu displays, with the first element called Overview, level with GPEP. When I move my mouse down to the next item in the third list, which is called Program Components, GPEP loses focus and shifts down to the second item in the second-level of the menu; thus disallowing me from clicking on anything within the GPEP menu except the first element.

CSS:

#nav {
width: 220px;
margin: 0;
padding: 0px 0 0 0;
float: left;
margin-right: 20px;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
height: 1%;
}
#nav ul li {
line-height: normal;
z-index: 100;
}
#nav li {
margin: 0;
}
#nav .navHeader {
padding: 0;
margin: 0;
font-size: 2.0em;
}
#nav .navHeader a{
color: #fff;
font-size: 0.65em;
font-weight: normal;
display: block;
padding: 4px 5px 4px 20px;
background-color: #006633;
border-bottom: solid 1px #695e4a;
margin: 0;
}
#nav .navHeader a.active {
background-color: #4b3242;
}

#nav .navHeader a.open {
background-color: #ffffff;
border-bottom: 1px solid #4b3242;
color: #4b3242;
}
#nav a {
text-decoration: none;
font-size: 100%;
}
#nav h2 a {
color: #ffffff;
}
#nav a:hover {
text-decoration: underline;
}
#nav li {
position: relative;
}
#nav ul li {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: left;
}
#nav li.navEnd{
margin-bottom: 0.3em;
}
#nav ul ul li a {
color: #000;
display: block;
padding:3px 3px 0px 40px;
font-weight: normal;
border-bottom: solid 1px #695e4a;
}
#nav ul ul ul li a {
color: #fff;
background: #006633;
display: block;
padding:3px 3px 3px 40px;
font-weight: normal;
border-bottom: solid 1px #695e4a;
}
#nav ul ul li a.active {
background-color: #4b3242;
color: #ffffff;
}
#nav ul ul ul li a.active {
background-color: #4b3242;
color: #ffffff;
}
#nav ul ul.hide {
position: absolute;
top: 0;
left: 100%;
z-index:500;
background-color: #006633;
width: 13em;
}
#nav ul ul ul.hide {
position: absolute;
top: 0;
left: 100%;
z-index:500;
background-color: #006633;
width: 13em;
}
#nav ul ul.hide li a {
padding: 3px 3px 3px 5px;
}
#nav ul ul ul.hide li a {
padding: 3px 3px 3px 5px;
}
#nav ul ul {
display: none;
}
#nav ul ul ul {
display: none;
}
#nav ul ul ul li {
display: none;
}
#nav ul li:hover ul {
display:block;
}
#nav ul ul li:hover ul li{
display:block;
}
#nav ul ul li {
width: 100%;
}
#nav ul ul ul li {
width: 100%;
}
#nav ul ul li a{
height: 1%;
}
#nav ul ul ul li a{
height: 1%;
}
#nav ul ul.show {
display: block;
}
#nav ul ul ul.show {
display: block;

HTML:

<div id="nav">
<ul>
<li><span class='navHeader'><a href='/about/index.php' title='About' >About</a></span>
<ul class='hide'>
<li><a href='/about/index.php' title='Goto Scholarships and Awards' >Mission</a></li>
<li><a href='/about/overview.php' title='Goto Scholarships and Awards' >Overview</a></li>
<li><a href='/about/goals.php' title='Goto Scholarships and Awards' >Goals</a></li>

<li><a href='/about/directorsmessage.php' title='Director&prime;s Message' >Director&prime;s Message</a></li>
</ul>
</li>
<li><span class='navHeader'><a href='/programs/index.php' title='Programs' >Programs</a></span>
<ul class='hide'>
<li><span class=''><a href='/programs/gpep_overview.php' title='GPEP' >GPEP</a></span>
<ul class='hide'>
<li><a href='/programs/gpep_overview.php' title='Overview' >Overview</a></li>

<li><a href='/programs/gpep_programcomponents.php' title='Program Components' >Program Components</a></li>
<li><a href='/programs/gpep_requirements.php' title='Requirements' >Requirements</a></li>
<li><a href='/programs/gpep_admission.php' title='Admission' >Admission</a></li>
</ul>
</li>
<li><span class=''><a href='/programs/sgpep_overview.php' title='SGPEP' >SGPEP</a></span>
<ul class='hide'>
<li><a href='/programs/sgpep_overview.php' title='Overview' >Overview</a></li>

<li><a href='/programs/sgpep_programcomponents.php' title='Program Components' >Program Components</a></li>
<li><a href='/programs/sgpep_admission.php' title='Admission' >Admission</a></li>
</ul>
</li>
<li><span class=''><a href='/programs/gsep_overview.php' title='GSEP' >GSEP</a></span>
<ul class='hide'>
<li><a href='/programs/gsep_overview.php' title='Overview' >Overview</a></li>
<li><a href='/programs/gsep_programcomponents.php' title='Program Components' >Program Components</a></li>

<li><a href='/programs/gsep_requirements.php' title='Requirements' >Requirements</a></li>
<li><a href='/programs/gsep_admission.php' title='Admission' >Admission</a></li>
</ul>
</li>
<li><span class=''><a href='/programs/gew_overview.php' title='GEW' >GEW</a></span>
<ul class='hide'>
<li><a href='/programs/gew_overview.php' title='Overview' >Overview</a></li>
<li><a href='/programs/gew_workingconditions.php' title='Working Conditions' >Working Conditions</a></li>

</ul>
</li>
<li><span class=''><a href='/programs/gaap_overview.php' title='GAAP' >GAAP</a></span>
<ul class='hide'>
<li><a href='/programs/gaap_overview.php' title='Overview' >Overview</a></li>
<li><a href='/programs/gaap_preparation.php' title='Preparation' >Preparation</a></li>
<li><a href='/programs/gaap_applyonline.php' title='Apply Online' >Apply Online</a></li>
<li><a href='/programs/gaap_senddocuments.php' title='Send Documents' >Send Documents</a></li>

<li><a href='/programs/gaap_reviewadmission.php' title='Review Admission' >Review Admission</a></li>
<li><a href='/programs/gaap_beforeyouleave.php' title='Before You Leave' >Before You Leave</a></li>
</ul>
</li>
</ul>
</li>
<li><span class='navHeader'><a href='/admissions/index.php' title='Admissions' >Admissions</a></span>
<ul class='hide'>
<li><span class=''><a href='/admissions/gpepsgpep_overview.php' title='GPEP/SGPEP' >GPEP/SGPEP</a></span>

<ul class='hide'>
<li><a href='/admissions/gpepsgpep_overview.php' title='Overview' >Overview</a></li>
<li><a href='/admissions/gpepsgpep_preparation.php' title='Preparation' >Preparation</a></li>
<li><a href='/admissions/gpepsgpep_applyonline.php' title='Apply Online' >Apply Online</a></li>
<li><a href='/admissions/gpepsgpep_senddocuments.php' title='Send Documents' >Send Documents</a></li>
<li><a href='/admissions/gpepsgpep_reviewadmission.php' title='Review Admission' >Review Admission</a></li>
<li><a href='/admissions/gpepsgpep_beforeyouleave.php' title='Before You Leave' >Before You Leave</a></li>

</ul>
</li>
<li><span class=''><a href='/admissions/gsep_overview.php' title='GSEP' >GSEP</a></span>
<ul class='hide'>
<li><a href='/admissions/gsep_overview.php' title='Overview' >Overview</a></li>
<li><a href='/admissions/gsep_preparation.php' title='Preparation' >Preparation</a></li>
<li><a href='/admissions/gsep_applyonline.php' title='Apply Online' >Apply Online</a></li>
<li><a href='/admissions/gsep_senddocuments.php' title='Send Documents' >Send Documents</a></li>

<li><a href='/admissions/gsep_reviewadmission.php' title='Review Admission' >Review Admission</a></li>
<li><a href='/admissions/gsep_beforeyouleave.php' title='Before You Leave' >Before You Leave</a></li>
</ul>
</li>
<li><span class=''><a href='/admissions/gaap_overview.php' title='GAAP' >GAAP</a></span>
<ul class='hide'>
<li><a href='/admissions/gaap_overview.php' title='Overview' >Overview</a></li>
<li><a href='/admissions/gaap_preparation.php' title='Preparation' >Preparation</a></li>

<li><a href='/admissions/gaap_applyonline.php' title='Apply Online' >Apply Online</a></li>
<li><a href='/admissions/gaap_senddocuments.php' title='Send Documents' >Send Documents</a></li>
<li><a href='/admissions/gaap_reviewadmission.php' title='Review Admission' >Review Admission</a></li>
<li><a href='/admissions/gaap_beforeyouleave.php' title='Before You Leave' >Before You Leave</a></li>
</ul>
</li>
</ul>
</li>
<li><span class='navHeader'><a href='/life/index.php' title='Life @ VIPP' >Life @ VIPP</a></span>

<ul class='hide'>
<li><a href='/life/index.php' title='Summary' >Summary</a></li>
<li><a href='/life/informationlinks.php' title='Information and Links' >Information and Links</a></li>
</ul>
</li>
<li><span class='navHeader'><a href='/people/index.php' title='VIPP People' >VIPP People</a></span>
<ul class='hide'>
<li><a href='/people/index.php' title='VIPP Staff' >VIPP Staff</a></li>
<li><a href='/people/advisorycommittee.php' title='Advisory Committee' >Advisory Committee</a></li>

<li><a href='/people/gipccinstructors.php' title='GIPCC Instructors' >GIPCC Instructors</a></li>
<li><a href='/people/recentparticipants.php' title='Recent Participants' >Recent Participants</a></li>
</ul>
</li>
<li><span class='navHeader'><a href='/news/index.php' title='News &amp; Events' >News &amp; Events</a></span>
<ul class='hide'>
<li><a href='/news/index.php' title='Latest News' >Latest News</a></li>

<li><a href='/news/upcomingevents.php' title='Upcoming Events' >Upcoming Events</a></li>
<li><a href='/news/globalearchive.php' title='Global-E Archive' >Global-E Archive</a></li>
<li><a href='/news/speakerseries.php' title='Speaker Series' >Speaker Series</a></li>
<li><a href='/news/vippcalendar.php' title='VIPP Calendar' >VIPP Calendar</a></li>
</ul>
</li>
</ul>
</div>

Any help would be greatly appreciated. I've tried quite a few things and still can't figure it out. I'm used to fixing things in IE; not Firefox.