I have presented a problem when trying to responsive my html-CSS navigation menu. At first my menu looked below the header, so I decided to solve this problem with a margin-top auto; and my menu was correctly re-located. But as I was reducing the browser window, my menu is hiding below the header-Fixed. I would like to know in what way I could solve this error using html-css, no other language. Thank you.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>SOFTWARE FREATICO</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<h1><i>Phreatic Software</i></h1>
</header>
<div class="contenedor">
<nav class="menu">
<ul class="nav">
<li><a href="#">NOSOTROS</a>
</li>
<li><a href="#">HOME</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
CODIGO CSS:
*{
margin:0px;
padding:0px;
}
header {
position:fixed;
z-index:9999;
top:0%;
left:0%;
width:100%;
background-image:url(material/1.jpeg);
color:#fff;
text-align:center;
box-shadow:0px 0px 30px 0px black;
}
body {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+65,29b8e5+73 */
background: rgb(179,220,237); /* Old browsers */
background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 65%, rgba(41,184,229,1) 73%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 65%,rgba(41,184,229,1) 73%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 65%,rgba(41,184,229,1) 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#29b8e5',GradientType=0 ); /* IE6-9 */
}
.contenedor {
position:relative;
width:80%;
margin:auto;
}
.menu {
position:relative;
width:50%;
margin:auto;
margin-top:3.7%;
}
ul,ol {
list-style:none;
}
.nav>li {
width:50%;
float:left;
background:yellow;
}
.nav li a {
text-align:center;
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}