CSS Menu Centered

Compatibiltiy View in IE8 - getting different menu layout

[J_pod]

I have created a horizontal menu for a website using CSS and it works great in Google Chrome, FF, & pretty good in IE8 (Compatibility Off). The problem I notice is the menu is not centering properly. I have read many posts about this IE bug, but cannot seem to find the right combination to fix problem. Thank you in advance.

CSS Code:
#menuh
{
position: relative;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
font-weight:bold;
font-style: normal;
margin: 0 auto;
text-align:center;
}

#menuh a
{
display:block;
text-align:center;
}

#menuh ul /*1st level menu appearence*/
{
list-style: none;
margin: 0 auto;
float: left;
}
#menuh ul ul /*2nd level menu appearence & location*/
{
position: absolute;
background-color: #EEEEEE;
width: 175px;
text-align:left;
float: left;
margin: 0 auto;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #893300;
}

#menuh ul ul li/*2nd level menu appearence & location*/
{
padding-top: 2px;
padding-bottom: 2px;
}
div#menuh ul ul,
div#menuh ul li:hover ul ul,
div#menuh ul ul li:hover ul ul
{display: none;}

div#menuh ul li:hover ul,
div#menuh ul ul li:hover ul,
div#menuh ul ul ul li:hover ul
{display: block;}

HTML Menu:
<div id="menuh">
<ul><li><a href="" >Menu 1</a></li></ul>
<ul><li><a href="" class="top_parent">Menu 2</a>
<ul>
<li><a href="">Level 2</a></li>
<li><a href="">Level 2</a></li>
</ul>
</ul>
<ul><li><a href="">Menu 3</a></ul>
<ul><li><a href="" >Menu 4</a></ul>
<ul>
<li><a href="" class="top_parent">Menu 5</a>
<ul>
<li><a href="" class="parent">Level 2</a>
<ul>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
<li><a href="">Level 3</a></li>
</ul>
</li>
<li><a href="">Level 2</a></li>
<li><a href="">Level 2</a></li>
</ul>
</ul>
<ul><li><a href="" >Menu 6</a></ul>
<ul><li><a href="" >Menu 7</a></ul>
</div>

[swa66]

Exactly what are you trying to center relative to what ?
The code seems to have many places it tries to center things in various ways ...

[J_pod]

I am trying to center the first level of the menu items. This menu is going to be set inside a table cell that will extend the length of my website.

<table width="775" height="27" border="0" cellspacing="0" cellpadding="0" align="center">

The second & third levels on the menu are left justified in the drop-down. Which works great.

[swa66]

First things first.

A table: once you learn CSS there is no need to abuse tables for layout anymore. Try it!

The html:
you're missing some </li> in there as far as I can see. Did you validate your code ?

Most of the examples you'll find on how menus work will use a different structure (one that makes more sense IMHO)

I'd go for:
[quote][pre]

<ul id="menuh">
 <li><a href="">Menu 1</a></li>
 <li><a href="">Menu 2</a>
  <ul>
   <li><a href="">Level 2</a></li>
   <li><a href="">Level 2</a></li>
  </ul>
 </li>
 <li><a href="">Menu 3</a></li>
 <li><a href="">Menu 4</a></li>
 <li><a href="">Menu 5</a>
  <ul>
   <li><a href="">Level 2</a>
    <ul>
     <li><a href="">Level 3</a></li>
     <li><a href="">Level 3</a></li>
     <li><a href="">Level 3</a></li>
     <li><a href="">Level 3</a></li>
    </ul>
   </li>
   <li><a href="">Level 2</a></li>
   <li><a href="">Level 2</a></li>
  </ul>
 </li> 
 <li><a href="" >Menu 6</a></li>
 <li><a href="" >Menu 7</a></li>
</ul> 
[/quote][/pre]

Next you need to style it ...

I'd simplify things first and get it working with a single layer of the menu and add the complexity as you go.

A block with 100% width and auto margins will just get margins of 0 and be done with it (it's as big as it needs to be to use up all the space).

If you want to center items, you almost need to make the items to be inline elements (or inline blocks). Then have text-align: center, in which case it's inline content would be centered. Provided it isn't floated left or right of course ...

Also I do suggest to make sure to keep the clutter out: get it working in a compliant browser (read not IE) with the minimal CSS you can first. Anything that's been added as an experiment that didn;t do what you needed should be removed.
Only then check all the other compliant browsers and only as a last step try to fix it for the legacy IE versions (conditional comments work to prevent you from needing to redo all the testing in all the other browsers).

You can probably also find ready-made menus out there to suit what you need.
Making drop down menus isn't the easiest thing to try in CSS if you're still learning ...

[J_pod]

Thank you for your detailed explainations, I will try to work with the inline block and center that to see what I get.
The CSS probably does have a lot of useless code in there, but since it was working in compliant browsers I wasn't to worried. Just recently I found that the old IE versions didn't center them.
I will let you know what I come up with...