Foros del Web » Creando para Internet » CSS »

Problema para ajustar menú desplegable de Mikmoro

Estas en el tema de Problema para ajustar menú desplegable de Mikmoro en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/09/2008, 09:47
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 17 años, 3 meses
Puntos: 0
Problema para ajustar menú desplegable de Mikmoro

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!
  #2 (permalink)  
Antiguo 14/09/2008, 13:29
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 17 años, 3 meses
Puntos: 0
Respuesta: Problema para ajustar menú desplegable de Mikmoro

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.
  #3 (permalink)  
Antiguo 14/09/2008, 15:05
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 17 años, 3 meses
Puntos: 0
Respuesta: Problema para ajustar menú desplegable de Mikmoro

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..
  #4 (permalink)  
Antiguo 14/09/2008, 16:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Problema para ajustar menú desplegable de Mikmoro

Buenas. No estoy seguro de entenderte: ¿en qué navegador las ves separadas?
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 15/09/2008, 01:06
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 17 años, 3 meses
Puntos: 0
Respuesta: Problema para ajustar menú desplegable de Mikmoro

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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:45.