Drop-down menu hiding behind upper level menu

[Inky1231]

1) Script Title:
flexdropdownmenu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...exdropdown.htm
3) Describe problem:

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 cna give would be appreciated.

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

Office of instruction--->Business Division--->Business careers-->*problem menu*

[ddadmin]

Hmm this one might be a little tricky to isolate, but first thing to try is to move the HTML markup for each flex drop down menu so it's outside the corresponding tab menu <a> element. So for the first business drop down menu, you'd move the below so it's outside all elements except the BODY tag, such as to the very end of the page:

		  <ul id="flexmenu1" class="flexdropdownmenu" style="font-size:small">
			  <li><a href="../../courses/index.php?division=BUSM" target="_blank">								Majors/Courses</a></li>
			  <li><a href="">Business Careers</a>
			  		<ul>
			  		<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>

</body>

Use the W3C validator to check that all the containment issues with regards to the UL menus are resolved.

[Inky1231]

Thank you for the reply, however, your suggestion did not work I tried it here:
http://www.dacc.edu/depts/inst/test.php and the problem is still there. Interestingly enough the other menu on that particular page does not suffer the same problem even though they use the same code, the only difference is that there is an added style to the other menu that is not with the problem menu.

[Inky1231]

Thank you for the reply, however, your suggestion did not work I tried it here:
http://www.dacc.edu/depts/inst/test.php and the problem is still there. Interestingly enough the other menu on that particular page does not suffer the same problem even though they use the same code, the only difference is that there is an added style to the other menu that is not with the problem menu.

Ok still trying to fix this problem. Interestingly enough the problem of the menu hiding only seems to occur with the submenu under the business careers section (incidentally for all menus of the same sub-level) This is the code for the section

<li><a href="">Business Careers</a>
			  		<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>

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.

[Inky1231]

Still having problems with this, any suggestions would be appreciated. Thanks.