Problema para ajustar menú desplegable de Mikmoro

[Kilofafeure]

Buenas, llevo un par de días intentando que el menú desplegable se me ajuste a lo que yo quiero, sin embargo no lo consigo. He utilizado el código de Mikmoro y lo he adaptado a mi site, sin embargo no consigo ubicarlo dónde quiero y tampoco que los submenús me aparezcan como yo deseo...

Ahora mismo lo tengo así:



Me gustaría que el menú apareciese en la barra negra, he pensado en ajustarlo con un position:relative; marcandole el top y el left, pero no se si es la manera correcta...les muestro mi css...también me gustaría que el espacio que queda entre los submenús fuese cero, he estado provando con los padding pero no lo he conseguido, espero me puedan ayudar porqué esto es bastante desesperante, muchas gracias de antemano.

estilo.css:

Código HTML:

@charset "utf-8";
* {
  margin:0;
  outline-color:-moz-use-text-color;
  outline-style:none;
  outline-width:0;
  padding:0;
}
#menu {
  font-size:0.9em;
  margin:20px auto;
  text-align:center;
}
#menu ul {
  list-style-type:none;
}
#menu ul li.nivel1 {
  float:left;
}
#menu ul li a {
  background-color: #000000;
  border:1px solid #000000;
  color: #FFFFFF;
  display:block;
  padding:0px;
  position:relative;
  text-decoration:none;
}
#menu ul li:hover {
  position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
  background-color: #000000;
  color: #FFFFFF;
  position:relative;
}
#menu ul li a.nivel1 {
  display:block !important;
  position:relative;
}
#menu ul li ul {
  display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
  display:block;
  left:0;
  position:absolute;
}
#menu ul li ul li a {
  border-top-color:#000000;
  padding:0px 0 0px;
}
#menu ul li ul li a:hover {
  border-top-color:#000000;
  position:relative;
}
table.falsa {
  border:0 none;
  border-collapse:collapse;
  float:left;
  position:relative;
}
body  
{
  color: #FFFFFF;
  background-color: #000000;
  background-image: url(../images/fondo.gif);
  font-family: Verdana,Helvetica,sans-serif;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  font-size: 10pt;
}
#topleftmenu 
{
	background-image:url(../images/topbar-left.gif);
	background-position:left center;
	background-repeat:no-repeat;
	height:16px;
	margin:0 20px 0 0;
	padding:10px 0;
	text-align:right;
}
#topmenu {
background-image:url(../images/topbar-fondo.gif);
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
height:36px;
margin:0;
padding:0;
}
#topmenu .moduletable 
{
	display:inline;
}	
a:link {
  text-decoration:none; 
}
dl { 
  margin: 0 0 5px 0;
 }
dt { 
  font-weight: bold;
}
dd { 
  margin: 0 0 0 0;
}
ul { 
  padding: 0 0;
  margin: 0 0;
}

Index.php:

Código HTML:

<div id="topmenu">
        <div id="topleftmenu">
            <div id="menu">
            		<ul>                
                        <li class="nivel1"><a class="nivel1" href="#"><img src="images/carrito.jpg" width="21" height="20"></a></li>                                              
                        <li class="nivel1"><a href="#">Inicio</a></li>             	
                        <li class="nivel1">Catálogo                 
                            <ul> 
                                <li><a class="nivel1" href="#">Novedades</a></li>
                               	<li><a class="nivel1" href="#">Reposiciones</a></li>
                                <li><a class="nivel1" href="#">Ofertas</a></li>
                            </ul>
                        </li>
                        <li class="nivel1">MiCuenta                    
                            <ul> 
                                <li><a class="nivel1" ref="#">Login/Logout</a></li>
                                <li><a class="nivel1" href="#">Cambiar Clave</a></li>
                                <li><a class="nivel1" href="#">Crear Cuenta</a></li>
                            </ul> 
                        </li>  
                        <li class="nivel1">Links
                            <ul>
                                <li><a class="nivel1" href="#">Clubs</a></li>
                                <li><a class="nivel1" href="#">Festivales</a></li>
                                <li><a class="nivel1" href="#">Dj's</a></li>
                                <li><a class="nivel1" href="#">Amigos</a></li>
                                <li><a class="nivel1" href="#">Colaboradores</a></li>
                            </ul>
                        </li>
                    </ul>
                    </div>
            </div>
</div> 

Un saludo!

[Kilofafeure]

Hola otra vez, acabo de solucionar el problema que no se me situaba bien el menu...he modificado el css así:

Código HTML:

#topleftmenu 
{
background-image:url(../images/topbar-left.gif);
background-position:left center;
background-repeat:no-repeat;
/*
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:right;
*/
#menu {
/*
font-size:0.9em;
margin:20px auto;
text-align:center;
*/
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:right;
}

mi pregunta es como puedo hacer para que no se me super ponga la imagen de topleftmenu con el menu en sí, y como puedo hacer para juntar los submenus...espero me puedan ayudar ya que llevo muchas horas con esto y no creo que sea tan difícil. Si no a ver si me pueden guiar donde encontrar esta información ya que las busquedas que he hecho no han sido muy fructíferas...gracias otra vez.

[Kilofafeure]

Pues al final he conseguido que se muestre el menú sin que se me solape con la imagen añadiendo a topleftmenu:

Código HTML:

padding-left: 117px;

Ya sólo me queda la duda de como juntar el submenú y que no se me muestren separadas las opciones...¿alguien sabe decirme que debo tocar? gracias..

[Mikmoro]

Buenas. No estoy seguro de entenderte: ¿en qué navegador las ves separadas?

[Kilofafeure]

Hola! en firefox se me ven separadas...en internet explorer no lo he provado...y lo que me gustaría es que novedades, reposiciones y ofertas se viesen juntos y no con ese espaciado...muchas gracias!