[SOLUCIONADO] No se me desplega el submenu

misaneg92 · #1 (**permalink**) 25/04/2016, 16:28

HTML:

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv= "ContentType" content="text/html"; charset=UTF-8>
	<link rel="shorcut icon" href="file:///C:\Users\Miguel\web\images\favicon.png">
	<title>Portal Web Big Data</title>
	<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
	<div id="wrapper">
		<div id="banner">
		</div>

		<nav id="navigation">
			<ul id="nav">
				<li> <a href="">Divisas</a></li>
				<li> <a href="">Mercados</a></li>
				<li> <a href="">Industria</a></li>
				<li> <a href="">D</a></li>
				<li> <a href="">E</a>
                    <ul id="id"> 
                    	<li> <a href="">F</a></li>
                    </ul>
                    <ul id="id"> 
                    	<li> <a href="">G</a></li>
                    </ul>

				</li>

			</ul>
		</nav>
		<div id="content_area">
			a
		</div>

		<div id="sidebar">
			b
		</div>

		<footer> 
			<p> Miguel Angel Sanchez Egido. TFG. All rights reserved </p>
		</footer>
	</div>
</body>
</html>

CSS:

Código:

body
{
    font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
    background-color: #e9e9e9;
}

body p
{
    font-size: 0.8em;
    line-height: 1.28;
}

#wrapper
{
    width: 1080px;
    background-color: white;
    margin: 0 auto;
    padding: 10px;
    border: 5px solid #dedede;
}

#banner
{
    background-image: url(images/banner.jpg);

    background-size:100% 100%;
    background-repeat: no-repeat;
    border: 5px solid #dedede;    
    height: 200px;
}

#content_area
{
    border: 5px solid #dedede;
    float: left;
    width: 750px;
    margin: 20px 0 20px 0;
    padding: 10px;
}

#sidebar
{
    float: right;
    width: 250px;
    height: 400px;
    margin: 20px 10px;
    padding: 10px;
    border: 2px solid #E3E3E3;
}

footer
{
    clear: both;
    width: auto;
    height: 40px;
    padding: 10px;
    border: 3px solid #E3E3E3;
    text-align: center;
    color: #fff;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(images/background.jpg);
}

#navigation
{
    height: 60px;
    border: 3px solid #E3E3E3;
    margin-top: 20px;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(images/background.jpg);
}


#nav
{
    list-style: none;
}

#nav ul
{
    margin: 0;
    padding: 0;
    width: auto;
    display: none;
}

#nav li
{
    font-size: 24px;
    float: left;
    position: relative;
    width: 180px;
    height: 50px;
}

#nav a:link, nav a:active, nav a:visited
{
    display: block;
    color: #fff;
    text-decoration: none;
}

#nav a:hover
{
    color: blue;
}

El problema es que al poner el raton sobre E no se desplega el submenu.

misaneg92 · #2 (**permalink**) 26/04/2016, 16:12

Alguna idea alguien de porque no me sale el submenu?

DesgraciadoGabo · #3 (**permalink**) 26/04/2016, 16:14

Esta mal definido tu css!

misaneg92 · #4 (**permalink**) 27/04/2016, 10:40

Que tendria que modificar/agregar a mi css para que se desplegue mi submenu?

misaneg92 · #5 (**permalink**) 28/04/2016, 11:43

Alguien piede echarme alguna mano con el css?

g3kdigital · #6 (**permalink**) 29/04/2016, 15:51

En el código css no hay nada que cambie el estado del menu, el ejemplo más facil de entender es este

Código CSS:

Ver originalli ul
{
display: none;
}
 
li:hover ul
{
  display:block;
}

Es decir siempre que haya un menu (ul) dentro de un li, se desplegara una vez que se haga hover sobre el li.

Acá hay una explicación más detallada del asunto: https://escss.blogspot.com.co/2013/0...-down-css.html

Lo otro es que tienes todo mal estructurado:

porque la palabra DE esta separado en dos li?
porque no esta bien identado?
Porque hay 2 id llamados de igual forma, si deben ser únicos? Y PORQUE con el id "id"?

Segundo, los estados de los enlaces a:visited, a:link, a:hover, a:active solo afectan a los elementos hijos dentro de la etiqueta, no afectan a los contenedores o padres de los enlaces, por lo que esa declaración en realidad no hace nada.

Se que estarás aprendiendo, por lo que el camino es largo pero necesitas estudiar más las bases y sobre todo el blog que te pase, tiene unos muy buenos consejos y técnicas. Saludos.