Tengo problema con el menu cuando coloco el formulari debajo del menu desaparece el efecto de las lista. Como hago para que se mantegan, ojo cuando quito el formulario funciona bien.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Modulo Educativo</title>
<meta name="generator" content="Bluefish">
<meta name="author" content="">
<meta name="date" content="">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
body {
background: url(img/Fondo.png);
}
#etiqueta{
text-align: center;
background-color: #252525;
border-radius: 20px;
border:2px solid #000000;
box-shadow: 10px 10px 20px #000000;
color: #ffffff;
margin: 0px auto;
width: 800px;
margin-top: 20px;
-webkit-animation-name: animacion2;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
#etiqueta h1{
text-shadow:2px 2px 20px #ff0036;
font: italic bold 36px Georgia, "Times New Roman", Times, serif;
margin-top: 10px;
margin-bottom: 10px
}
nav {
width: 600px;
margin: 0 auto;
}
nav ul {
list-style: none;
text-align: center;
}
nav > ul > li {
float: left;
}
nav ul li a {
background:#252525;
min-width: 160px;
padding: 15px 0;
margin: 5px;
color: hsl(0,0%,100%);
box-shadow: 0 1px 3px hsla(0,0%,0%,0.5);
border-radius: 20px;
box-shadow: 10px 10px 20px #000000;
font: bold 14px Tahoma, Geneva, sans-serif;
color: #fefefe;
text-decoration: none;
display: block;
transition: background-color 2s;
-webkit-transition: background-color 2s;
}
@-webkit-keyframes animacion1{
from{
background-color: #252525;
}to{
background-color: #ff0036;
}
}
@-webkit-keyframes animacion2{
from{
box-shadow:inset 10px 10px 20px #252525;
}to{
box-shadow:inset 0px 0px 10px #ff0036;
}
}
nav ul li a:hover, a.flecha-abajo:hover, a.flecha-derecha:hover {
background-color: #ff0036;
}
nav ul li a.flecha-abajo {
background: #252525 url('img/arrow.png') no-repeat;
background-position: 125px 50%;
}
nav ul li a.flecha-derecha {
background: #252525 url('img/arrow.png') no-repeat;
background-position: 125px 50%;
}
nav ul li ul {
opacity: 0;
visibility: hidden;
position: absolute;
min-width: 160px;
z-index: -1;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-o-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
nav ul li:hover > ul {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
nav ul li ul li {
position: relative;
margin: 10px;
}
nav ul li ul li ul {
right: -162px;
top: 10px;
}
fieldset {
text-align: center;
background-color: #252525;
border-radius: 20px;
border:2px solid #000000;
box-shadow: 10px 10px 20px #000000;
color: #ffffff;
margin: 0px auto;
width: 350px;
margin-top: 25px;
font: bold 14px Tahoma, Geneva, sans-serif;
color: #fefefe;
text-decoration: none;
display: block;
}
legend {
background-color: #252525;
border-radius: 20px;
border:2px solid #000000;
box-shadow: 10px 10px 20px #000000;
color: #ffffff;
width: 300px;
display: block;
padding: 10px;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
</style>
</head>
<body>
<div id="etiqueta">
<h1>Modulo Educativo</h1>
</div>
<div>
<fieldset>
<legend>Iniciar Sesión</legend>
<form action="iniciarSesion.php" method="post">
<br />
Nombre de usuario:
<br />
<input type="text" name="txtNombre" id="txtNombre" /><br />
Password: <br />
<input type="password" name="txtPassword" /><br />
<br />
<input type="submit" name="btnIniciar" value=" Entrar "/>
<br />
</form>
</fieldset>
</div>
<nav>
<ul>
<li><a href="#">Modulo Educativo</a>
</li>
<li>
<a href="#" class="flecha-abajo">Mis Páginas</a>
<ul>
<li><a href="https://www.google.co.ve/">Google</a></li>
<li><a href="http://www.me.gob.ve/">Ministerio de Educación</a></li>
<li><a href="https://www.facebook.com/">Facebook</a></li>
<li><a href="https://twitter.com/">Twitter</a></li>
</ul>
</li>
<li>
<a href="#" class="flecha-abajo">Ayuda</a>
<ul>
<li>
<a href="#" >Documentación</a>
</li>
<li>
<a href="#" >Acerca de</a>
</li>
</ul>
</li>
</ul>
</nav>
<br />
<div>
<fieldset>
<legend>Iniciar Sesión</legend>
<form action="iniciarSesion.php" method="post">
<br />
Nombre de usuario:
<br />
<input type="text" name="txtNombre" id="txtNombre" /><br />
Password: <br />
<input type="password" name="txtPassword" /><br />
<br />
<input type="submit" name="btnIniciar" value=" Entrar "/>
<br />
</form>
</fieldset>
</div>
</body>
</html>