Foros del Web » Creando para Internet » CSS »

Menú desplegable independiente

Estas en el tema de Menú desplegable independiente en el foro de CSS en Foros del Web. Hola como estan foreros? Tengo un menu que hice bastante elegante mi problemas es que un submenu es muy grande considerando el tamaño de lo ...
  #1 (permalink)  
Antiguo 23/10/2012, 21:21
 
Fecha de Ingreso: julio-2011
Ubicación: Eldorado-Misones
Mensajes: 6
Antigüedad: 13 años, 4 meses
Puntos: 0
Menú desplegable independiente

Hola como estan foreros?

Tengo un menu que hice bastante elegante mi problemas es que un submenu es muy grande considerando el tamaño de lo que se desplaza.

Esta es una mi imagen de mi problema:



Lo que quiero es poder cambiar o trabajar con cada submenu por separado, ya que modifico uno y resto tambien lo hace! me pueden ayudar? Gracias Saludos les dejo el codigo HTML y CSS

Codigo HTML:

Código HTML:
<ul class="menu">
 
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Utilidades</a>
       
        <ul>
            <li><a href="#" class="documents">MiPony</a></li>
            <li><a href="#" class="messages">VLC Media Player</a></li>
        </ul>    
    </li>
  <li><a href="#">Curiosidades</a></li>
  <li><a href="#">Descargas</a>
 
        <ul>
            <li><a href="#" class="documents">Como Hacerlo?</a></li>
            <li><a href="#" class="messages">Haz Tu Pedido</a></li>
            <li><a href="#" class="signout">Reposición de Archivos</a></li>
        </ul>
 
    </li>
        <li><a href="#">Películas</a>

     <ul>
   
             <li><a href="#" class="1">De 1900 a 1920</a></li>
             <li><a href="#" class="2">De 1920 a 1930</a></li>
             <li><a href="#" class="3">De 1930 a 1940</a></li>
             <li><a href="#" class="4">De 1940 a 1950</a></li>
             <li><a href="#" class="5">De 1950 a 1960</a></li>
             <li><a href="#" class="6">De 1960 a 1970</a></li>
             <li><a href="#" class="7">De 1970 a 1980</a></li>
             <li><a href="#" class="8">De 1980 a 1990</a></li>
             <li><a href="#" class="9">De 1990 a 2000</a></li>
             <li><a href="#" class="10">De 2000 a 2010</a></li>
             <li><a href="#" class="11">De 2010 a 2012</a></li>
     </ul>

</li>
  <li><a href="#">Libro de Visitas</a></li>
  <li><a href="#">Contacto</a></li>
 
</ul> 
Codigo CSS:

Código:
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* Menu */
.menu {	
	height: 40px;
	width: 670px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

/* Links */

.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;
	
	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

/* Sub Menu */

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

.menu ul li a {
	width: 180px;
	padding: 3px 0 1px 9px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }
  #2 (permalink)  
Antiguo 24/10/2012, 07:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Menú desplegable independiente

Es decir, tienes conocimiento del uso de varios selectores, transiciones, pseudo-clases, usas prefixes, degradados, etc... ¿Pero no sabes cómo hacer para definir estilos? ¿No es más fácil decir que has copiado el menú de alguna página de demo's y que no tienes ni idea de qué hacer?
  #3 (permalink)  
Antiguo 24/10/2012, 08:16
 
Fecha de Ingreso: julio-2011
Ubicación: Eldorado-Misones
Mensajes: 6
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Menú desplegable independiente

En que cambia que diga si copie o no de alguna pagina? Eso no soluciona mi problema.
De tdas maneras estas equivocado y no ayudas mucho. Saludos gracias

Etiquetas: html, menu+deplegable
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 21:16.