Foros del Web » Creando para Internet » 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, 18:03
 
Fecha de Ingreso: mayo-2011
Mensajes: 256
Antigüedad: 13 años
Puntos: 5
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, 19:27
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 12 años, 8 meses
Puntos: 20
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...o ganar dinero rapido?
  #3 (permalink)  
Antiguo 09/02/2012, 05:01
danihxh
Invitado
  
Mensajes: n/a
Puntos:
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, 14:42
 
Fecha de Ingreso: mayo-2011
Mensajes: 256
Antigüedad: 13 años
Puntos: 5
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: lateral, submenu, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:59.