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.