Foros del Web » Creando para Internet » CSS »

Problema submenu

Estas en el tema de Problema submenu en el foro de CSS en Foros del Web. Buenas, tengo un pequeño problema con un menú, que le quiero agregar un submenu.. y se me mueve todo y no hay manera.. tengo el ...
  #1 (permalink)  
Antiguo 25/11/2010, 10:21
 
Fecha de Ingreso: julio-2008
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Problema submenu

Buenas, tengo un pequeño problema con un menú, que le quiero agregar un submenu.. y se me mueve todo y no hay manera..

tengo el siguiente div

<div id="menus">
<h2 class="hide">Menu:</h2>
<a class="activemenu" href="">Mobiliario</a><span class="hide"> | </span>
<a class="menu" href="">Sanitarios</a><span class="hide"> | </span>
<a class="menu" href="">Griferias</a><span class="hide"> | </span>
</div>

y en el archivo css

#menus {
clear:both;
width:665px;
float:right;
}

.menu {
padding:3px 8px 5px 8px;
margin:0 0 0 0;
text-decoration:none;
font-size:0.9em;
background:#666 url(images/corner.gif) top right no-repeat;
border-bottom:0px solid #ffffff;
border-left:1px solid #ffffff;
color:#FFF;
}

.menu:hover {
text-decoration:none;
background:#d0d0d0 url(images/corner.gif) top right no-repeat;
border-bottom:1px solid #ffffff;
}

.activemenu{
padding:3px 8px 5px 8px;
color:#ffffff;
margin:0 0 1px 0;
font-size:0.9em;
text-decoration:none;
background:#333 url(images/corner.gif) top right no-repeat;
}

.activemenu:hover {
text-decoration:none;
color:#ffffff;
}

se ve lo siguiente:



El problema que al añadir las etiquetas <li> <ul> se va todo al aire..

Haber si alguien me puede ayudar!

1 Saludo y Gracias.
  #2 (permalink)  
Antiguo 25/11/2010, 13:29
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema submenu

En www.araudi.net tienes varios ejemplos de menu que puedes utilizar.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 26/11/2010, 02:12
 
Fecha de Ingreso: julio-2008
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problema submenu

Ok, voy a mirar, haber si encuentro alguno que pueda adaptar a este.. que he buscado otros pero nada, no hay manera..

1 Saludo y Gracias!
  #4 (permalink)  
Antiguo 26/11/2010, 03:44
 
Fecha de Ingreso: julio-2008
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problema submenu

Bueno, he estado toqueteando el menú que hay en la web, pero me queda de la siguiente manera..



El html

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
  <title>Menu desplegable CSS</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 1.1</a></li>
		<li><a href="#">Opción 1.2</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 2.1</a></li>
		<li><a href="http://www.google.es">Opción 2.2</a></li>
		<li><a href="#">Opción 2.3</a></li>
		<li><a href="#">Opción 2.4</a></li>
		<li><a href="#">Opción 2.5</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 3.1</a></li>
		<li><a href="#">Opción 3.2</a></li>
		<li><a href="#">Opción 3.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 4.1</a></li>
		<li><a href="#">Opción 4.2</a></li>
		<li><a href="#">Opción 4.3</a></li>
		<li><a href="#">Opción 4.4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="#">Opción 5.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html> 
El css

Código:
* {
margin: 0px;
padding: 0px; outline: 0;
}
html, body {
width: 100%;}

#menu {  
text-align: center;
font-size: 0.7em;
width:665px;
margin: 20px auto;

}
#menu ul { 
list-style-type: none;}

#menu ul li.nivel1 { 
float: left;
width: 70px;
margin-right: 4px;


}
#menu ul li a {
padding:3px 8px 5px 8px;
margin:0 0 0 0;
text-decoration:none;
font-size:0.9em;
background:#666 url(images/corner.gif) top right no-repeat;
border-bottom:0px solid #ffffff;
border-left:1px solid #ffffff;
color:#FFF;


}
#menu ul li:hover {
position: relative;



}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
text-decoration:none;
background:#d0d0d0 url(images/corner.gif) top right no-repeat;
border-bottom:1px solid #ffffff;
padding:3px 13px 5px 8px;
margin:0 0 0 0;

}
#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;

}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {
width: 50px;
padding:3px 5px 5px 8px;;
border-top-color: #000;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

.activemenu {
padding:3px 8px 5px 8px;
color:#ffffff;
margin:0 0 1px 0;
font-size:0.9em;
text-decoration:none;
background:#333 url(images/corner.gif) top right no-repeat;
}
Se monta todo, y se te pones encima del desplegable se hace mas grande aun.. he estado cambiando, pero nada, y no puedo tener el que esta activo de otro color.. aunque bueno, seria ir probando..

1 Saludo y Gracias!!
  #5 (permalink)  
Antiguo 26/11/2010, 05:27
 
Fecha de Ingreso: julio-2008
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problema submenu

He encontrado otro, pero no se como separar el menú del primer botón del desplegable

Así me queda... Se monta el que despliega con el menu.. el segundo si que lo puedo separar...



He probado con el margin.. pero no hay manera..

El Html

Código HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<title>Página de ejemplo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Language" content="Español" />
<link rel="stylesheet" type="text/css" href="menu2.css" />
</head>
<body>
<ul id="menu-horizontal">
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a>
<ul>
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a></li>
</ul>
</li>
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a></li>
</ul>

</div>
</div>
</div>
</body>
</html> 
El css

Código:
ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}
ul#menu-horizontal ul {
display: none;
position: relative;
top: 14;
left:0;
margin:-1px;
padding:1px;
background:#FFFFFF;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul{
display: none;
}

ul#menu-horizontal li:hover ul{
display: block;
}

#menu-horizontal {
width:500px;
margin:0 auto;
}

#menu-horizontal li {

width:75px;
min-height:19px;
text-align:center;
background:#666 url(images/corner.gif) top right no-repeat;
list-style:none;
padding:1px 0 1px 0;
margin:0 2px 10px 0;
}

/* y otro poquito por aquí.. */

#menu-horizontal li:hover {
background:#d0d0d0 url(images/corner.gif) top right no-repeat;

}

#menu-horizontal li a {
font:76% tahoma, verdana, sans-serif;
color:#FFF;
text-decoration:none;
}

#menu-horizontal li ul li{
float:none;
width:75px;
margin:1px 0 2px 0;

}
1 Saludo y Gracias
  #6 (permalink)  
Antiguo 26/11/2010, 09:54
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema submenu

Se variando el top de:
Código CSS:
Ver original
  1. ul#menu-horizontal ul {
  2. display: none;
  3. position: relative;
  4. top: 14;
  5. left:0;
  6. margin:-1px;
  7. padding:1px;
  8. background:#FFFFFF;
  9. }

Si no me equivoco es este el que tienes que modificar
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: submenu
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 13:00.