CSS Dropdown menu problem in FIREFOX 3.5

Discussion in 'CSS' started by wanovak, Oct 16, 2009.

  1. #1
    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;
    Code (markup):
    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>
    Code (markup):
    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.
     
    wanovak, Oct 16, 2009 IP