Foros del Web » Diseño de Sitios web » CSS »

Poner Submenu lateral

 Estas en el tema de Poner Submenu lateral en el foro de CSS en Foros del Web. Hola tengo el menu de arriba , pero me gustaria poder desplejar el submenu lateralmente justo debajo del menu , pero no vertical .....y no ...
  #1 (permalink)  
Antiguo 06/02/2012, 17:03
 
Fecha de Ingreso: mayo-2011
Mensajes: 177
Poner Submenu lateral
Hola tengo el menu de arriba , pero me gustaria poder desplejar el submenu lateralmente justo debajo del menu , pero no vertical .....y no consigo hacerlo
este es mi codigo

Código HTML:
<ul class="menu sf-js-enabled" id="menu-nav-header"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">INICIO</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-18" id="menu-item-18">
<a href="">TEST</a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 15em; visibility: hidden; display: none;">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32" id="menu-item-32" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">SUBSCRIPCIÓN</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-31" id="menu-item-31" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">PUBLICIDAD</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30" id="menu-item-30" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">EQUIPO</a></li>
</ul>
</li>
</ul>
Y EL CSS , ES
Código: 
#mainnav-bar ul {
    float: left;
    position: relative;
}

#menu-nav-header {
    border-bottom: 1px solid;
    height: 30px;
}
#mainnav-bar li {
    float: left;
    line-height: 40px;
    margin-left: 2px;
    position: relative;
}
#mainnav-bar li a, #mainnav-bar li a:visited {
    color: #000000;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0 15px;
    position: relative;
    text-decoration: none;
}
#mainnav-bar ul ul {
 
    left: 0;
    line-height: 30px;
    margin-top: -10px;
    position: absolute;
}
#mainnav-bar ul ul li a, #mainnav-bar ul ul li a:visited {
    background-image: none !important;
    color: #000000;
    font-size: 1.1em !important;
}

#mainnav-bar ul ul li a, #mainnav-bar ul ul li a:visited {
    background-image: none !important;
    color: #FFFFFF;
    font-size: 1.3em !important;
}
#mainnav-bar li a, #mainnav-bar li a:visited {
    color: #000000;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0 15px;
    position: relative;
    text-decoration: none;
}
Si alguien puede decirme como hacerlo, no consigo hacerlo , un saludo y muchas gracias a todos
  #2 (permalink)  
Antiguo 08/02/2012, 18:27
 
Fecha de Ingreso: agosto-2011
Mensajes: 206
Respuesta: Poner Submenu lateral
La verdad no entiendo tu código, pero si lo que quieres es que cuando aparezca el submenú, este se desplace en sentido horizontal lo que deberás hacer es ponerle un float a los elementos de la lista.
__________________
Aprende cómo ganar dinero en internet...

Quieres Ganar dinero rapido en chile?
  #3 (permalink)  
Antiguo 09/02/2012, 04:01
Avatar de danihxh  
Fecha de Ingreso: octubre-2010
Ubicación: Barcelona
Mensajes: 65
Respuesta: Poner Submenu lateral
Supongo que lo que quieres es esto:

Código HTML:
<html>
<head>
<style>
	#menu
	{
		background-color:red;
		display:block;
		list-style-type:none;
		margin:0;
		padding:0;
		width:100%;
		height:30px;
		position:relative;
	}
	
	#menu .option
	{
		display:block;
		margin:0;
		padding:0;
		width:200px;
		height:100%;
		float:left;
	}
	
	#menu .option .mainOption
	{
		background-color:cyan;
		display:block;
		height:100%;
		text-align: center;
		line-height:30px;
		text-decoration:none;
		color:black;
	}
	
	#menu .option .mainOption:hover
	{
		background-color:yellow;
	}
	
	#menu li ul
	{
		display:none;
	}

	#menu li ul li
	{
		display:block;
		margin:0;
		padding:0;
		width:200px;
		height:100%;
		float:left;
	}
	
	#menu li ul li a
	{
		background-color:orange;
		display:block;
		height:100%;
		text-align: center;
		line-height:30px;
		text-decoration:none;
		color:black;
	}	

	#menu li ul li a:hover
	{
		background-color:pink;
	}	
	
	#menu li:hover ul
	{
		background-color:green;
		display:block;
		list-style-type:none;
		margin:0;
		padding:0;
		width:100%;
		height:30px;
		position:absolute;
		left:0;
	}
</style>
<body>
	<ul id="menu">
		<li class="option">
			<a href="" class="mainOption">INICIO</a>
			<ul>
				<li><a href="">SUBOPCIÓN INICIO 1</a></li>
				<li><a href="">SUBOPCIÓN INICIO 2</a></li>
				<li><a href="">SUBOPCIÓN INICIO 3</a></li>
			</ul>
		</li>
		<li class="option">
			<a href="" class="mainOption">TEST</a>
			<ul>
				<li><a href="">SUBOPCIÓN TEST 1</a></li>
				<li><a href="">SUBOPCIÓN TEST 2</a></li>
				<li><a href="">SUBOPCIÓN TEST 3</a></li>
			</ul>
		</li>
	</ul> 
</body>
</html>
  #4 (permalink)  
Antiguo 09/02/2012, 13:42
 
Fecha de Ingreso: mayo-2011
Mensajes: 177
Respuesta: Poner Submenu lateral
Exactamente era eso lo que queria hacer, pero si tengo un menu principal con 10 elementos y el submenu de 3 , sucede que si el submenu es del ultimo elemento , se situa debajo del primer elemento del menu, como puedo hacer para que se situen justo debajo del que le corresponde.

Código HTML:

<ul class="menu sf-js-enabled" id="menu-nav-header"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">INICIO</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA1</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA2</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA3</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA4</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA5</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA6</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA7</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA8</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">PRUEBA9</a></li>

<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-18" id="menu-item-18">
<a href="">TEST</a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 15em; visibility: hidden; display: none;">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32" id="menu-item-32" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">SUBSCRIPCIÓN</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-31" id="menu-item-31" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">PUBLICIDAD</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30" id="menu-item-30" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">EQUIPO</a></li>
</ul>
</li>
</ul>
En este ejemplo el submenu se situa debajo de Inico, y me gustaria que se situase debajo de Test(centrado) , y si hubiese otro submenu debajo de Prueba6, que se situase debajo de Prueba6.....

Espero que entendais la idea que quiero hacer,

Muchas gracias por todo , si pudieseis resolverme esa duda....

Un saludo

Etiquetas: background, lateral, submenu
Respuesta

¿Nuevo en el foro? Regístrate

« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:04.
SEO by vBSEO 3.3.2