CSS issue with menu items apearing behind the top level items

I am working on a site with multiple levels in the drop down. For the most part it works great but I am having a slight problem right now, on-load everything loads fine but the first time you hover over the drop-down menu the lower level menu is hidden behind the upper level menu. If you move off the menu then go back the menu displays correctly. I have tried changing the z-index to no avail. Any help you can give would be appreciated.

my site is http://www.dacc.edu/depts/inst/test.php
hover over office of instruction on the top of the page

Office of instruction—>Business Division—>Business careers–>problem menu

I don’t see ay issues with the code, but perhaps there is something in the css file messing it up. I tried temporarily “fixing” the problem by moving the entire menu to the left which allowed the problem section to open to the right, I thought that if there was a problem it would also effect lower level menus but it does not. It only effects the menu directly under business careers (and other menus of the same level). This leads me to believe it is css, but z-index did not work. I tried doing position:absolute instead of position:relative and that worked but it skewed the menus so that menus with one or two items were unusable. Any help here would be appreciated.

This issue is driving me nuts! I have been trying to resolve this for a week!
Here is the CSS

.flexdropdownmenu, .flexdropdownmenu ul{ /*topmost and sub ULs, respectively*/

font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: #e5febc;
border: 1px solid gray;
border-bottom-width: 0;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}

.flexdropdownmenu li{
position:relative;
 background: #e5febc;
z-index:3;
}
.flexdropdownmenu li ul ul a{

 background: #e4f0c0;
 z-index:400;
 }
.flexdropdownmenu li ul li ul a{
position:relative;
 background: white;
z-index:auto;
}
 
 .flexdropdownmenu li ul ul ul a{
font-size:x-small;
 background: #e4f0c0;

 }

.flexdropdownmenu li a{
display: block;
width: 200px; /*width of menu (not including side paddings)*/
color: black;

border-bottom: 1px solid gray;
text-decoration: none;
padding: 4px 5px;
}

* html .flexdropdownmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 200px; /*width of menu (include side paddings of LI A*/
}

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{
background: #c8e181;
}



</style>

Here is the HTML, problem area in red ( all the menus that have the same level are affected)

<ul style="text-align:center">
<li><a href="../index.html">Departments and Offices</a></li>
<li style="margin-bottom:10px; "><a href="" data-flexmenu="flexmenu81" >Office of Instruction</a>
</li>
</ul>

<ul id="flexmenu81" class="flexdropdownmenu"  >

       <li>	
		 <a href="bus/" >Business Division</a>
		  <ul >
			  <li><a href="../../courses/index.php?division=BUSM" target="_blank">Majors/Courses</a></li>
			  <li><a href="">Business Careers</a>
			  		[COLOR="#FF0000"]<ul style="z-index:100" >
			  		<li><a href="#">Business, Marketing, and Management</a>
			  			<ul>
			  			<li><a href="../../catalog/programs/Accounting.pdf" target="_blank">
						Accounting</a></li>
			  			<li>
						<a href="../../catalog/programs/AccountingCertificate.pdf" target="_blank">
						Accounting Certificate</a></li>
			  			<li>
						<a href="../../catalog/programs/CosmetologyCertificate.pdf" 									target="_blank">
						Cosmetology Certificate</a></li>
			  			<li>
						<a href="../../catalog/programs/ManagementCertificate.pdf" target="_blank">
						Management Certificate</a></li>
			  			<li><a href="../../catalog/programs/Marketing.pdf" target="_blank">
						Marketing</a></li>
			  			<li>
						<a href="../../catalog/programs/RealEstateCertificate.pdf" target="_blank">
						Real Estate Certificate</a></li>
			  			<li>
						<a href="../../catalog/programs/TourismCertificate.pdf" target="_blank">
						Tourism Certificate</a></li></ul></li>
			  		<li><a href="#">Office Systems and Technologies</a>
			  		<ul><li>
						<a href="../../catalog/programs/AccountingOfficePersonnel.pdf" 									target="_blank">
						Accounting Office Personnel</a></li>
			  		<li>
					<a href="../../catalog/programs/Accounting%20Office%20Certificate.pdf" 							target="_blank">
					Accounting Office Services Certificate</a></li>
					<li>
					<a href="../../catalog/programs/AdministrativeProfessional.pdf" 								target="_blank">
					Administrative Professional</a></li>
					<li>
					<a href="../../catalog/programs/Desktop%20Publishing%20Certificate.pdf" 						target="_blank">
					Desktop Publishing Certificate</a></li>
					<li>
					<a href="../../catalog/programs/MedicalOfficePersonnel.pdf" target="_blank">
					Medical Office Personnel</a></li>
					<li>
					<a href="../../catalog/programs/Medical%20Office%20Certificate.pdf" 							target="_blank">
					Medical Office Certificate</a></li>
					<li>
					<a href="../../catalog/programs/MicrosoftOfficeCertificate.pdf" 								target="_blank">
					Microsoft Office Certificate</a></li>
					<li>
					<a href="../../catalog/programs/Office%20Assistant%20Certificate.pdf" 							target="_blank">
					Office Assistant Certificate</a></li>
					<li><a href="../../catalog/programs/SoftwareSpecialist.pdf" target="_blank">
					Software Specialist</a></li>
			  		
			  		</ul></li>
			  		</ul></li>[/COLOR]
			  <li><a href="bus/facstaff.php">Faculty/Staff</a></li>
			 <!-- <li><a href="">Degree Requirements</a></li>-->
			  <li><a href="https://www.google.com/calendar/embed?mode=AGENDA&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=dacc.edu_1ohfrssuu7vhm91ilq98h7lc90%40group.calendar.google.com&amp;color=%23856508&amp;ctz=America%2FChicago
" target="_blank">Calendar of Events</a></li>
			  <!--<li><a href="">Alumni Profile</a></li>-->
			  <li><a href="../../catalog/" target="_blank">Course Catalog</a></li>
			  <li><a href="../../schedules/" target="_blank">Schedules</a></li>

		  </ul>
		  </li>
		 
		   <li > <a href="../../deved/" >Developmental Education</a>		  <ul>
		  <li><a href="../../deved/instructors.php">Instructors</a></li>
			 <li><a href="../../deved/online.php">Online Course Information</a></li>
			  <li><a href="../../deved/slinks.php">Links for Students</a></li>
			   <li><a href="../../deved/flinks.php">Links for Faculty</a></li>
			   
 </ul></li>


		  <li > <a href="la/" >Liberal Arts Division</a>		  <ul >
		  <li> <a href="/courses/index.php?division=LAS">Majors/Courses</a></li>
		   <li><a href="la/faculty.php">Faculty/Staff</a></li>
		    <li><a href="la/writersroom.php">Writer's Room</a></li>
		     <li><a href="la/exitexam.php">Exit Exam</a></li>
		      <li><a href="https://www.google.com/calendar/embed?mode=AGENDA&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=dacc.edu_1ohfrssuu7vhm91ilq98h7lc90%40group.calendar.google.com&amp;color=%23856508&amp;ctz=America%2FChicago
">Calendar of Events</a></li>
		       <li><a href="../../../catalog/">Course Catalog</a></li>
		       <li><a href="../../../schedules/">Schedules</a></li>
		       <li><a href="la/gallery.html">Gallery/Artwork </a> </li>  
		  		  </ul></li>
	   <li><a href="sci/">Sciences Division</a>
	   <ul>
	<li><a href="sci/" class="style6">Math &amp; Sciences Home</a>
	  <ul>   <li><a href="career.php" class="style6">
	  Career Programs</a>
	  <ul>
	    <li><a href="">Associate in Applied Science Programs</a>
	  <ul>
	  <li><a href="/sci/nursing/">ADN/RN Nursing-Associate Degree</a>
	  <ul style="font-size:x-small">  <li><a href="sci/nursing/history.html">History</a></li>
	    <li><a href="sci/nursing/faculty.php">Faculty</a></li>
	    <li><a href="sci/nursing/facilities.php">Facilities</a></li>
	    <li><a href="sci/nursing/curriculum.php">Curriculum</a></li>
	    <li><a href="sci/nursing/admission.php">Admission Criteria</a></li>
	    <li><a href="sci/nursing/technical_requirements.php">Requirements</a></li>
	    <li><a href="sci/nursing/faqs.php">FAQs</a></li>
	    <li><a href="sci/nursing/links.php">Useful Links</a></li>
	    <li><a href="sci/nursing/LevelINursingCarePlans.doc">Care Plan</a></li>
	     <li><a href="sci/nursing/Emergency_Clinical.doc">ER Clinical Form</a></li>
	    <li><a href="sci/nursing/NursingCarePlan_NUR298_Psychiatric.dot">Psych Care Plan</a></li>
	    <li><a href="sci/nursing/Nursing299_Wille.doc">NURS299</a></li>
</ul></li>
	
	  <li><a href="agribusiness.php">Agribusiness</a></li>
	  <li><a href="agribusinessmgt.php">Agribusiness Management Option</a></li>
	  
	  
	  
	  <li><a href="/sci/hit/">Health Information Technology</a>
	  <ul >
	  	<li><a href="/courses/index.php?area=HITT&amp;division=MS" target="_blank">Curricula</a></li>
	    <li><a href="sci/hit/faculty.php">Faculty</a></li>
	    <li><a href="sci/hit/staff.php">Staff</a></li>
	    <li><a href="sci/hit/standards.php">Philosophy &amp; Program Goals</a></li>
	    <li><a href="sci/hit/coursereq.html">Course Requirements</a></li>
	    <li><a href="http://www.ahima.org" target="_blank">Professional Associations</a></li>
	    <li><a href="sci/hit/ethics.php">Code of Ethics</a></li>
	    <li><a href="sci/hit/links.php">Links</a></li>
	    <li><a href="sci/hit/advisory.php">Advisory Committee</a></li>
	    <li><a href="sci/hit/ppe.php">PPE Sites</a></li>
	    <li><a href="sci/hit/codingsert.php">Coding Certificate</a></li>
	  </ul></li>
	  <li><a href="../../catalog/programs/MedicalLaboratoryTechnician.pdf">Medical Laboratory Technician (Kankakee)</a></li>
	  <li><a href="sci/radtech/">Radiologic Technology</a>
	  <ul>
	  <li><a href="sci/radtech/program.php">Program Description</a></li>
	  <li><a href="sci/radtech/faculty.php">Faculty</a></li>
	  <li><a href="sci/radtech/entrance.php">Entrance Requirements</a></li>
	  <li><a href="sci/radtech/coursereq.php">Required Courses</a></li>
	  <li><a href="/courses/index.php?area=RDTC&amp;division=MS">Courses &amp; Descriptions</a></li>
	  <li><a href="sci/radtech/links.php">LInks</a></li>
	  <li><a href="sci/sono/">Sono Homepage</a></li>
	  <li><a href="sci/echo/">Echo Homepage</a></li>
	  <li><a href="http://virtual.parkland.edu/rc/danville.htm">Respitory Care (Parkland)</a></li>
	  </ul>
	  
	  </li></ul></li>
	  <li><a href="../../~ksturgeon/engineering.php">Coordinated Engineering Program</a></li>

	   <li><a href="">Certificate Programs</a>
	  <ul>
	  <li><a href="sci/sono/">Diagnostic Medical Sonography</a></li>
	  <li><a href="sci/hit/codingsert.php">Health Information Technology Medical Coding</a></li>
	  <li><a href="../../aac/cguides/2010-2011/Nurse Assistant CNA Certificate.pdf">Nursing Assistant (Adult Education)</a></li>
	  <li><a href="/sci/nursing/">Practical Nursing</a> </li></ul></li></ul></li>
	 </ul></li></ul>

	   
	  

	  
	  
	   <li><a href="tech/">Technology and Information Systems Division</a>
	   		<ul>
	   			<li><a href="">Horticulture Careers:</a>
	   				 <ul>
	   					<li><a href="">Floral Design Certificate</a></li>
	   					<li><a href="">Golf Course Management Degree</a></li>
	   					<li><a href="">Grounds Attendant Certificate</a></li>
	   					
	   					<li><a href="">Landscape Design/Construction Degree</a></li> 
	   				  		
	   				  </ul></li>

	   			
	   			<li><a href="">Instrustrial Careers:</a>
	   				 <ul>
	   					<li><a href="">Electronic Technology</a></li>
	   					<li><a href="">Heating Ventilation Air Conditioning Certificate</a></li>
	   					<li><a href="">Industrial Maintenance</a></li>
	   					<li><a href="">Machine tool Operations Certificate</a></li> 
	   				  	<li><a href="">Maintenance Mechanic Certificate</a></li>
	   					<li><a href="">Maintenance Mechanic Advanced Certificate</a></li>
	   					<li><a href="">Manufacturing Engineering Technology</a></li>
	   					<li><a href="">Manufacturing Engineering Technology-CAD option</a></li>
	   					<li><a href="">Welding Certificate</a></li>
	   					<li><a href="">Welding Advanced Certificate </a></li>
	   					<li><a href="">Wind Turbine Technician Certificate</a></li>
	   				  </ul></li>

	   			<li><a href="">Information Systems:</a>
	   				 <ul>
	   					<li><a href="">Application Development Degree</a></li>
	   					<li><a href="">Cisco Certificate</a></li>
	   					<li><a href="">Computer Communications and Networks Degree</a></li>
	   					<li><a href="">Computer Communications and Networks Degree Certificate</a></li> 
	   				  	<li><a href="">Computer Programming/PC</a></li>	
	   				  </ul></li>
				<li><a href="">Automotive Careers:</a>
	   			  	<ul>
	   			  		<li><a href="">Automotive Collision Repair Certificate</a></li>
	   			  		<li><a href="">Automotive Technology Certificate</a></li>
	   			  		<li><a href="">Automotive Technology Degree</a></li>
	   			  	</ul>	
	   		</ul>
	   
	   
	   </li>
   	<li><a href="../../cns/">Computer and Network Services</a></li>
		<li>  <a href="../../cce/">Corporate and Community Education (formerly 
		  B&amp;EI)</a></li>
		  <li><a href="pccs/">Partnerships for College and Career Success (formerly 
		  Tech Prep)</a></li>
		  <li> <a href="ier/">Institutional Effectiveness and Research</a></li> 
		
		  <li><a href="../../imc/">Instructional Media Center</a></li>
		  <li><a href="lib/">Library</a></li>
		  <li><a href="../../online/">Online Support</a></li>
		<li>  <a href="../../sbdc/">Small Business Development Center</a></li>
 </ul>

</li>

Hi, Inky1231, and welcome to the forums. :slight_smile:

Which browser(s) are you seeing the problem in? It’s working fine in Firefox7 on Linux, but I’m seeing the problem you describe in Chromium and Epiphany (both WebKit-based).

You might want to re-think your menu, as it’s not accessible to anybody with Javascript disabled. There was a recent thread with examples for building pure CSS versions.

TechnoBear,
Thanks for the welcome and your reply :slight_smile: I did try a pure Css menu first but as the College I work for supports primarily windows with IE and Firefox and pure CSS has a glitch in IE so I have to use javascript. The biggest issue that is confusing is that the problem only happens the first time you mouse over the menu. Once you mouse off then mouse on again it appears fine. At first I thought it was a CSS driven problem as when I changed position relative to position absolute it showed up fine but it skewed the menus so that a few were unusable. However, now I am wondering if the problem may be javascript (which I am a newbie at), but either way I can not find the problem.