Problema submenu

Takehiko · #1 (**permalink**) 25/11/2010, 10:21

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.

C2am · #2 (**permalink**) 25/11/2010, 13:29

En www.araudi.net tienes varios ejemplos de menu que puedes utilizar.
Saludos

Takehiko · #3 (**permalink**) 26/11/2010, 02:12

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!

Takehiko · #4 (**permalink**) 26/11/2010, 03:44

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!!

Takehiko · #5 (**permalink**) 26/11/2010, 05:27

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

C2am · #6 (**permalink**) 26/11/2010, 09:54

Se variando el top de:

Código CSS:

Ver originalul#menu-horizontal ul {
display: none;
position: relative;
top: 14;
left:0;
margin:-1px;
padding:1px;
background:#FFFFFF;
}

Si no me equivoco es este el que tienes que modificar