Este es el html que quiero llamar dentro del iframe. Como ven, es un dropdown dentro de una lista que hará de header en varias paginas.
<!DOCTYPE html>
<html>
<head>
<title>Janfa</title>
<link rel="stylesheet" type="text/css" href="css/Dropdown.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
</head>
<body>
<ul>
<li>
<div class="dropdown">
<button class="dropdown-btn">
<i class="material-icons md-light">menu</i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li><span>Janfa</span></li>
<li class="login"><a href="">Log in</a></li>
</ul>
</body>
</html>
El siguiente es el html en donde tengo el iframe:
<!DOCTYPE html>
<html>
<head>
<title>Janfa</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="css/Index.css">
</head>
<body>
<iframe src="header.html"></iframe>
</body>
</html>
y este es el CSS del html index
body{
background-color: #eee;
margin: 0;
}
iframe{
width: 100%;
height: 59px;
border-style: none;
position: relative;
}
El iframe se muestra perfectamente pero al activar el menu desplegable las opciones quedan ocultas dentro del margen del iframe y no se muestran (no adjunto el css del dropdown para no hacer la pregunta demasiado larga. Pero si, si sirve) solo que no se muestra completo cuando lo invoco por medio de el iframe. Alguna sugerencia?