Need major help fast - tabs overlapping on small screens

[mcolton]

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem:

I just updated 1 of my sites, www.orhspets.org and found out I have a problem with smaller screens or resolutions. If you make the screen smaller, the menu tabs overlap. When I mouseover some of the menu tabs, some of the submenus are covered up.

Where can I fix this. I have included the css file. How can I program for this in the future. Thanks

		<div id="myslidemenu" class="jqueryslidemenu">
	  <ul>
			<li><a href="http://fpm.petfinder.com/petlist/petlist.cgi?shelter=GA70&amp;status=A&amp;age=&amp;animal=&amp;title=&amp;style=8&amp;ref=PeDTzKTrPyr53PM">Available Pets</a></li>
			<li><a href="events.htm" rel="dropmenu2">Events Calendar</a>
			  <ul style="width:600px">
  			  <li><a href="disco-night.pdf">
			      <IMG SRC="triangle2.gif" WIDTH="13" HEIGHT="13" BORDER="0" ALT="Triangle">
					  ORHS "Stayin' Alive" disco night with the Doctor DJ's will be happening on Sunday October 4.
			      Click here for details.</a>
          </li>
          <li><a href="#"><IMG SRC="triangle2.gif" WIDTH="13" HEIGHT="13" BORDER="0" ALT="Triangle">
		        Every month, ORHS holds First Friday Adoption Night from 5-7 pm at Harmony Crossing Shopping Center.</a>
					</li>	
          <li><a href="#"><IMG SRC="triangle2.gif" WIDTH="13" HEIGHT="13" BORDER="0" ALT="Triangle">
			      Weekly, some available cats/kittens are on display at Lake Oconee Animal Hospital and 
			      the Park Place Animal Hospital.</a>
					</li>	
				</ul>		
  		</li>
			<li><a href="#">About Us</a>
			  <ul style="width:250px">
  			  <li><a href="organization-info.htm">Organization Information</a></li>
			    <li><a href="spay-neuter.pdf">Spay / Neuter Program</a></li>
			    <li><a href="http://www.sniksnak.com/cathealth">Cat Health</a></li>
			    <li><a href="http://www.sniksnak.com/doghealth">Dog Health</a></li>
				</ul>		
			<li><a href="officers.pdf">Board Members</a></li>
			<li><a href="volunteer.htm">Volunteer Jobs</a></li>
			<li><a href="membership.pdf">Contributions / Donations</a></li>
			<li><a href="#">Adoption Forms</a>
			  <ul style="width:200px">
  			  <li><a href="catadoption.htm">Cats - online form</a></li>
			    <li><a href="cat-adoption.doc">Cats - .doc format</a></li>
			    <li><a href="cat-adoption.pdf">Cats - .pdf format</a></li>
		      <li><a href="dogadoption.htm">Dogs - online form</a></li>
		      <li><a href="dog-adoption.doc">Dogs - .doc format</a></li>
		      <li><a href="dog-adoption.pdf">Dogs - .pdf format</a></li>
				</ul>		
  		</li>
    </ul>
    </div>

[ddadmin]

This is normal in the sense that the width of your menu bar is based on the width of the document, so you have to take into account it being possibly too wide to fit all on one line. Practically speaking the easiest way is just to minimize the chances of this happening, by removing unnecessary links from the main menu bar and reducing its font size so its contents don't spill over to another line even in the lowest common screen resolution.

[mcolton]

Thanks. I don't but if you really needed more menu options and they overlapped to a second line, how do you stop the submenus from being covered. I guess z-index is used but where.