<html>
<head>
<title>Documento sin título</title>
<style>
#barra-superior {
background: #EAEAEA; /*Color de la barra*/
width:100%;
height:40px; /*Alto de la barra*/
margin:-12px 0px 0px -8px;
position:fixed; /*Para que la barra se quede fija*/
z-index:102; /*Para que la barra se quede fija*/
}
#menu{
margin:0px 0px 0px 50px;
width:1120px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, right (a la derecha)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}
#menu ul li{
display:block;
float:left;
height:30px;
}
#menu ul li a{
display:block;
float:left;
color:#000000; /* Color del texto */
font: 14px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/
text-decoration:none;
padding:12px 0px 0px 20px;
}
#menu ul li a:hover{
background: #EAEAEA; /* Color del fondo al pasar el ratón por encima de cada pestaña, yo no quiero que sea diferente, por eso lo tengo del mismo color que la barra*/
color:#000000; /* Color del texto al pasar el ratón por encima*/
height:20px;
}
#fondo {
width:100%;
height:300px; /*Alto de la barra*/
margin:-300px 0px 0px -8px;
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
#bloqueo {
background: #ffffff; /*Color de la barra*/
width:100%;
height:200px; /*Alto de la barra*/
margin:280px 0px 0px -8px;
position:fixed; /*Para que la barra se quede fija*/
z-index:102; /*Para que la barra se quede fija*/
}
#menu{
margin:0px 0px 0px 50px;
width:1120px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, right (a la derecha)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}
#menu ul li{
display:block;
float:left;
height:30px;
}
#menu ul li a{
display:block;
float:left;
color:#000000; /* Color del texto */
font: 14px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/
text-decoration:none;
padding:12px 0px 0px 20px;
}
#menu ul li a:hover{
background: #EAEAEA; /* Color del fondo al pasar el ratón por encima de cada pestaña, yo no quiero que sea diferente, por eso lo tengo del mismo color que la barra*/
color:#000000; /* Color del texto al pasar el ratón por encima*/
height:20px;
}
</style>
</head>
<body>
<div id='fondo'><img src="https://www.nationalairlines.com/css/images/nationalairlines_3.jpg" width="100%" /></a></li></div>
<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='http://Otanyu.blogspot.com/search/label/Anime'>Anime</a></li>
<li><a href='http://Otanyu.blogspot.com/search/label/Manga'>Manga</a></li>
<li><a href='http://Otanyu.blogspot.com/search/label/Videojuegos'>Videojuegos</a></li>
<li><a href='http://Otanyu.blogspot.com/search/label/Otros'>Otros</a></li>
</ul>
</div>
</div>
<div id='bloqueo'>
<div id='menu'>
<ul>
</ul>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario