how to center horizontal nav bar and make my dropdown menu stay open (stickyness)

I am having trouble centering a horizontal css navigation bar.  I tried to wrap it in a .table with margin set to 0 and auto, I tried applying text-align to the li's, but it didn't work.
Also, the dropdown won't stay down in ie7 and Firefox, although I have success in ie6 (it appears to struggle a bit in ie6, but maybe that is my old touchpad! - I actually seemed to make it work in ie6 by reducing the top padding of the dropdown so my "hotspot" was "closer" - thought that would work in ie7 and Firefox, but to no avail. The site uses server side includes to work (my navigation is included on a txt page).  My practice page is at www.helpingservices.org/PRACTICE.html (I included below my css code - please excuse my notes in progress....)
/* Navbar division */
 #navbar{
	/* Set to any width */
    /* border:dashed 1px red; */ 
         /* Use any background color/image you like */
          background-image:url(Buttons/button_gradient_nav.jpg) repeat-x;
	/* Use any fonts you like */
         font-family: Verdana, Geneva, Arial, Helvitica, Sans-Serif;
	/* Same as simple navbar, but smaller font size here */
         font-size:80%;
	color:#fff; /* white */
	/* Use any height you like, but match to link height */
         height:1.5em;
	margin-left:0px; /* WAS 10 PX- REMOVED BECAUSE IT CREATED WHITE SPACE */
	background-color: #000000;
	text-align:center; /*added to center contents of navbar, will then apply to child ul margin-left and margin right to center */
    }
    
    /* Remove bullets from unordered list */
    #navbar ul{
        list-style-type:none;	
		 background-image:url("Buttons/button_gradient_nav.jpg");	
		/* padding-left:3em;
		padding-right:3em; /* ORIGINALLY COMMENTED OUT THE PADDING, BECAUSE IT SCREWS UP THE DROPDOWNS ALIGNING WITH THE PARENT NAVIGATION BUTTON */
    }
    
   /* List items in the navbar */ 
#navbar li{ 
  float:left; 
  /* Required for drop-down menus */ 
  position:relative; 
} 
 
#navbar a,
#navbar a:link,
#navbar a:visited {
text-decoration:none;
font-family: Verdana, Geneva, Sans-Serif;
 background-image:url("Buttons/button_gradient_nav.jpg");
	background-repeat:repeat-x;
font-size:80%;
color:#fff;
display:block;
height:1.5em;
width:auto; _width:9.5em;/* WAS 6 EM, NOT ENOUGH FOR TEXT, MAKING IT AUTO ALLOWED THE LONGER LINKS TO FIT - 6/24/09 IE6 doesn't respond to auto */
  border-right: solid 1px #ddd; 
  line-height:1.5em; /* WAS 2EM, CHANGED TO 1.5EM */
  text-align:center; 
  outline-style:none; 
  padding-left:.5em;
  padding-right:.5em;
  }
 
/* Navbar hover, active, and current page links */ 
#navbar a:hover, 
#navbar a:active, 
#navbar li.selected a:link, 
#navbar li.selected a:visited{ 
  background:#ddd url("Buttons/button_gradient_nav.jpg"); repeat-x center; 
  color:#000; 
} 
 
/* Drop-down menu styles */ 
/* Applies to drop-down menus in navbar */ 
#navbar li ul{ 
  position:absolute; 
  z-index:100; 
  visibility:hidden; 
  line-height:1.5em;
} 
 
/* Make drop-down visible on navbar hover */ 
#navbar li:hover ul, 
#navbar li a:hover ul{ /* IE6 hack */ 
  visibility:visible; 
  top:1.4em; 
  left:0; 
} 
 
 
/* Applies to links on the drop-down menu */ 
#navbar li:hover ul li a, 
#navbar li a:hover ul li a{ /* IE6 hack */ 
  background:#ccc; /* Removes background image */ 
  color:#000; 
  text-align:left; 
  display:block; 
  width:10em; 
  padding:.1em 0 0 1em; /* padding more than .4em prevents the dropdown from "sticking down" and allowing the user to hover over and select from dropdown menu in IE6 */
  /* height:auto; */
} 
 
/* Hover on drop-down menu links */ 
#navbar li:hover ul li a:hover, 
#navbar li a:hover ul li a:hover{ /* IE6 hack */ 
  background: #aaa; 
  color:#000; 
} 
 
/* IE6 hack applies to its table drop-down */ 
#navbar table { 
margin:-1px;
  border-collapse:collapse; 
  position:absolute; 
 top:-.199em; /* WAS 0.5 BUT CHANGED TO O.1 BECAUSE THERE WAS A GAP FOR THE DROPDOWN MENU 6/24/09 */
  left:0; 
  z-index:100; 
  font-size:14px; /* font size has to be defined inside the table for IE6 hack, otherwise dropdown shrinks */
  }

Open in new window

SweetIowaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RouchieCommented:
Hi

Because of the amount of code hacks in your example I would recommend abandoning your approach and using an already-proven method that works in all major browsers.  This way as IE updates to newer versions you won't continuously have to rehack the code.

The 'suckerfish' approach is the most widely recommended as it is standards compliant and requires hardly any coding to get working.  I use it in all my designs as it is vitually future-proof:  http://htmldog.com/articles/suckerfish/dropdowns/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SweetIowaAuthor Commented:
I've come across that solution frequently.  I was hoping to do a pure css solution... I thought I was so close!  I am going to investigate this and come back in a few hours - Renee
0
RouchieCommented:
There is no pure CSS solution unfortunately because IE6 is so bad at CSS, and some people are even still using IE5
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

SweetIowaAuthor Commented:
...still trying to get this all to work.....Sweet Iowa
0
SweetIowaAuthor Commented:
Well, my Dreamweaver crashed, so I am sidetracked with that problem.  The sucker fish menu is working, but I had  a bit of a hangup with it with IE7.  It's working now, I just need to style it.  
0
SweetIowaAuthor Commented:
I should say it working on a DIFFERENT test page than what I have above - if you go there, it probably still looks like a problem!  -Sweet Iowa
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.