Centrar menu

[60NZ4]

Hola amigos, tengo un problema con mi menu, ahora añado el codigo, pero basicamente es que me sale pegado a la izquierda y me gustaria que saliese centrado, pero conservando la estructura de que ocupe el 100% del ancho, seria mas o menos asi


Home|About|...|...---------------------------

y me gustaria que se centrase de esta forma

-------Home|About|...|...|...|-----------


no sabia como explicarlo espero que se entienda claro

aqui adjunto el css

Código CSS:

/*------------------------------------------------------------------*/
/*-----------------------------menu---------------------------------*/
/*------------------------------------------------------------------*/
        
#dhtmlgoodies_menu li a {
                height:30px;
                width:100px;  
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 35px;
                color: #FFF;
            }
 
#dhtmlgoodies_menu li a:hover, #dhtmlgoodies_menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
}
 
#dhtmlgoodies_menu ul li ul{
display:none;
}
 
/* Submenu */
#dhtmlgoodies_menu ul{
border:1px solid #000;
background-color:#666;
padding:0px;
font-weight:bold;
list-style:none;
}
 
#dhtmlgoodies_menu ul.menuBlock1{ /* Barra de menú - elementos del menu principal*/
border:0px;
padding:1px;
border:1px solid #000;
background-color:#666;
overflow:visible;
}
 
#dhtmlgoodies_menu ul.menuBlock2{ /* Barra de menú - elementos del menu principal*/
border:0px;
padding:0px;
border:1px solid #000;
}
#dhtmlgoodies_menu a{
color: #FFF;
text-decoration:none;
padding-left:2px;
padding-right:2px;
}
 
/* Estilos del menú principal. El que esta siempre visible */
 
#dhtmlgoodies_menu .currentDepth1{
padding-left:5px;
padding-right:5px;
border:1px solid #666;
}
#dhtmlgoodies_menu .currentDepth1over{
padding-left:5px;
padding-right:5px;
background-color:#eee;
border:1px solid #000;
}
#dhtmlgoodies_menu .currentDepth1 a{
font-weight:bold;
}
#dhtmlgoodies_menu .currentDepth1over a{ 
color:#666;
font-weight:bold;
}
 
 
 
/*------------------------------------------------------------------*/
/*-----------------------------fin-menu-----------------------------*/
/*------------------------------------------------------------------*/
 

habia probado a añadir esto

#dhtmlgoodies_menu {
text-align:center;
}
pero no hace nada, y al final lo que he echo a sido en el html poner esto:

Código HTML:

<div id="dhtmlgoodies_menu">
            
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Products</a>
                            
                    </ul>
                
        </div>
 

asi me sale pero no se centra, tambien he probado ha hacerlo con una tabla de esta forma

Código HTML:

<div id="dhtmlgoodies_menu">
                <table border="0" cellpadding="0" cellspacing="0" style="text-align:center">        
                <tr><td>    
                
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Products</a>
                            
                    </ul>
</td></tr>
                </table>    
                
        </div>
 

De esta forma si me sale centrado pero solo los elementos del menu, no se ve el fondo de la linea entera que es lo que yo quiero que se vea...

es decir se centrado pero asi

Home|About|Services|Products
cuando yo queria asi

--------Home|About|Services|Products-------

----- se entiende que es la parte negra del menu (quien haya probado el codigo sabra lo que digo XD)

me trae loco esto amigos, ¿saben que es lo que tengo que tocar?

gracias :D