Menú desplegable independiente

[adrianarielacosta]

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; }