Menu desplegable

[disguiseddevil]

Buenas si entran aqui verán que en colecciones aparece como un menú deplegable. Estoy aprendiendo a hacer páginas web y me gutaría saber como se consigue eso. Alguien puede decirme que codigo hay que insertar para poner por otra categoria más.

Por ejemplo una categoría debajo de la que ya hay que se llamase PIEDRAS.

[gVenom]

si hubieras revisado un podo verias que en la misma pagina esta el código de ese menu.

Código HTML:

<ul class="menu" id="menu" style="text-align:left">
    
    <div style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es/' class='m_2k9_menu_horizontal2_link'>Inicio</a></div></div><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es//empresa-idispaces-348.html' class='º'>Empresa</a></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'>Colecciones<ul><li><a  href='http://www.idispaces.com/es//space-amp-soul-437.html' >Space & Soul</a></li></ul></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'>Proyectos<ul></ul></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'>Materiales<ul></ul></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es//noticias-417.html' class='º'>Noticias</a></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es//datos-de-contacto-258.html' class='º'>Contacto</a></div></li>
    
    </ul>
 

Si no lo entiendes, busca en google "menus con css"

[disguiseddevil]

Si, si, si el codigo lo he visto. Pero lo que no se. es específicamente que parte del código hace ea funcion.

[gVenom]

este es el secreto
<li style='float:left;

[leoass]

gvenom,me darias un ejemplo de un menu asi? por que realmente necesito poner uno y creo que sabes bien como se hace, estoy programando en html si me dieras una respuesta para que lo haga en html te lo agradeceria mucho

[gVenom]

el codigo de arriba es html y css. Si quieres aplicarlo de esa forma, tienes que usar CSS.

Date una vuelta aca para que aprendas a hacerlos

[disguiseddevil]

Intento poner otro apartado debajo de space&soul pero no me sale.

Puede alguien poner un ejemplo?

gracias

[[NiRVaNa]]

Éste sería el código acomodado

Código:

<ul class="menu" id="menu" style="text-align:left">
	<div style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es/' class='m_2k9_menu_horizontal2_link'>Inicio</a>
		</div>
	</div>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es//empresa-idispaces-348.html' class='º'>Empresa</a>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>Colecciones
			<ul>
				<li>
					<a  href='http://www.idispaces.com/es//space-amp-soul-437.html' >Space & Soul</a>
				</li>
			</ul>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>Proyectos
			<ul></ul>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>Materiales
			<ul></ul>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es//noticias-417.html' class='º'>Noticias</a>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es//datos-de-contacto-258.html' class='º'>Contacto</a>
		</div>
	</li>
</ul>

Si te fijas, despues de colecciones se abre una etiqueta de lista desordenada <UL> es decir, que se crea una lista dentro de una lista, logrando así lo necesario para el menu desplegable...

Tendria que quedarte una estructura de este este estilo:

Código:

<ul>
	<li>algo</li>
	<li>algo mas
		<ul>
			<li>algo dentro de algo mas</li>
			<li>algo mas dentro de algo mas</li>
		<ul>
	</li>
	<li>no va mas</li>
<ul>

Por lo tanto, para agregar algo despues de Space & Soul deberias de agregar otro item despues de Space & Soul

Código:

<li>
   <a  href='http://www.idispaces.com/es//path-to-html-file.html' >Earth & Flesh</a>
</li>

Debería de quedar así:

Código:

<div style='padding:0px 5px 0px 5px;'>Colecciones
   <ul>
      <li>
         <a  href='http://www.idispaces.com/es//space-amp-soul-437.html' >Space & Soul</a>
      </li>
      <li>
         <a  href='http://www.idispaces.com/es//path-to-html-file.html' >Earth & Flesh</a>
      </li>
   </ul>
</div>

Se entiende?

Salu2.

[disguiseddevil]

Esto es una explicación con dos pares de pelotas.

muchas gracias