Hola a todos, pues he hecho un menú desplegable en el botón de "información útil" que me mueve el contenido de la web al abrirlo, no se como hacér que ese menú desplegable "flote" sobre la web para que no me distorsione el contenido y,por cierto, la propiedad float no me funciona xD al menos no he sabido colocarla adecuadamente si esa fuera la solución.
Os pongo el contenido de la web hasta ahora, tan sólo guardadlo en .html y miradlo please :D. Perdon por el tocho de codigo, seguro q sobra alguna cosa pero bueno al menos así medio funciona xD
Os pongo el contenido de la web hasta ahora, tan sólo guardadlo en .html y miradlo please :D. Perdon por el tocho de codigo, seguro q sobra alguna cosa pero bueno al menos así medio funciona xD
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Prueba</title>
<style>
* {margin:0px; padding:0px; border:0px; outline: 0px}
body {
background-color: #33ffff;
font-family: sans-serif,arial,verdana;
text-align: center;
}
#global {
width: 960px;
height: 100%;
margin: 0px auto;
}
#cabecera {
background-color: #009900;
height: 150px;
}
#texto-cabecera {
color: white;
text-decoration: none;
position: relative;
top: 20px;
text-shadow: 1.5px 1px 1px brown, -0.5px -0.5px 2px rgb(0, 0, 0);
}
#navegador {
position: relative;
top: 44px;
}
#navegador ul {
list-style: none;
}
#navegador li.nivel1, #navegador li.info {
float: left;
border: 1px solid black;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
width: 158px;
background-color: #336633;
padding: 6px 0px;
border-left-color: #333333;
border-top-color: #333333;
border-right-color: #333333;
}
#navegador ul li#botonactivo {
border-bottom-width: 0px;
background-color: #99ff66;
border-left-color: black;
border-top-color: black;
border-right-color: black;
font-weight: bold;
}
#navegador a {
text-decoration: none;
display: block;
color: black;
}
#navegador ul li:hover {
border-bottom-width:0px;
background-color: #99ff66;
border-left-color: black;
border-top-color: black;
border-right-color: black;
font-weight: bold;
}
#navegador ul li.info:hover {
border-bottom-width:1px;
background-color: #339933;
border-left-color: black;
border-top-color: black;
border-right-color: black;
font-weight: bold;
}
#navegador ul li ul {
display:none;
font-weight: normal;
font-size:0.8em;
border-collapse: collapse;
}
#navegador ul li:hover ul{
display: block;
}
#navegador ul li ul li {
border:1px solid black;
background-color: #cccc99;
height: 18px;
border-collapse: collapse;
position:relative;
top:6px;
margin:2px;
padding:3px 0px 0px 0px;
}
#navegador ul li ul li:hover {
background-color: #cc9933
}
#navegador ul li ul li:hover {
border-bottom-width: 1px;
}
#contenido {
background-color: #99ff66;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 20px 10px 10px 20px;
}
#pie {
height: 100px;
background-color: blue;
border: 3px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
#wrapper {
float:right;
width:450px;
height:250px;
text-align: left;
}
</style>
</head>
<body>
<div id="global">
<div id="cabecera">
<h1 id="texto-cabecera">PROBANDO MI NUEVA WEB<br>POR FAVOR AYUDADME CON EL MENU DESPLEGABLE :D</h1>
<div id="navegador">
<ul>
<li class="nivel1" id="botonactivo"><a href="#">Inicio</a></li>
<li class="nivel1"><a href="#">Proceso</a></li>
<li class="nivel1"><a href="#">Tarifas</a></li>
<li class="nivel1"><a href="#">Contratar</a></li>
<li class="nivel1"><a href="#">Contacto</a></li>
<li class="info"><a href="#">Información útil</a>
<ul><li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
<li><a href="#">Artículo 3</a></li>
<li><a href="#">Artículo 4</a></li>
<li><a href="#">Artículo 5</a></li>
<li><a href="#">Artículo 6</a></li>
<li><a href="#">Artículo 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contenido">
<h1 style="margin-top:20px">Bienvenido a mi web</h1>
</div>
<div id="pie">Pie de Página</div>
</div>
</body>
</html>