Html - como abrir uma pagina abaixo do menu

Front-end
, ,
#1

olá, boa noite.
Gostaria de saber como faço pra abrir abaixo do menu cujo qual eu selecionei?
Ou seja quero abrir uma pagina na mesma página onde tem o menu.

#2

segue meu código para vocês entenderem melhor.

<section id="menu-topo" class="cor-ae">
	<div id="logo" style="position: absolute; left:48%;" >
		<img src="psi.png"/>
	</div>
	
	<section id="login" style="top:20px;">
		<img src="usu.jpg" alt="usuario" >
		

	</section>
	<div    ><a href="http://localhost:8080/ProjetoFinal/Index.jsp" id="logof" >Sair</a></div>
</section>

<div id="cabecalho-secundario" class="cor-ae">
		<nav>
<ul>
  
    <li>Cadastro
        <ul>
			<li  id="cfc" " ><a href="/acessoliberado.jsp">Cadastro</a></li>
		
			
        </ul>
    </li>
    <li>Marcar Consultas
        <ul>
			
			<li   id="cfc"   href="/acessoliberado.jsp">Cadastro</a></li>
			
        </ul>
    </li>

</ul>

body{
margin: 0;
padding: 0;
}

#menu-topo{
width: 100%;
height: 80px;
padding-top:10px;
}

#logo img{
height: 70px;
display: block;
margin: 0 auto;
}

#logof{
width: 200px;
position: absolute;
top: 45px;
left: 1780px;
font-style: italic;
color: #0C4E98;
}

#login{
width: 200px;
position: absolute;
top: 0;
right: 0;
}

#login img{
position: absolute;
width: 50px;
height: 50px;
top: 1px;
left: 50px;
border: 3px solid #0C4E98;
box-sizing: border-box;
border-radius: 50%;
}

#login p{
position: absolute;
width: 120px;
top: -8px;
left: 75px;
font: 15px roboto, opensans, verdana, sans-serif;
color: #0C4E98;
}

#login button{
position: absolute;
top: 40px;
left: 75px;
}

#cabecalho-secundario{
width: 100%;
height: 45px;
font-family: ubuntu, opensans, verdana, sans-serif;
text-decoration: none;
display: flex;
justify-content: center;
background-color:#e0c259;
font-size: 14px;
box-shadow: 0px 1px 3px;
}

#cabecalho-secundario ul{
position: relative;
max-width: 480px;
list-style: none;
margin: 0 auto;
}

#cabecalho-secundario ul >li{
position: relative;
float: left;
width: 170px;
height: 40px;
margin: 0;
text-align: center;
line-height: 40px;
text-transform: uppercase;
font-family: roboto, opensans, verdana, sans-serif;
}
#cabecalho-secundario ul :hover{
background: #ad801c;
}

#cabecalho-secundario ul li a{
text-decoration: none;
color:#0C4E98;
}

#cabecalho-secudario li {
height: 45px;
padding-top: 4px;;
}

#cabecalho-secundario ul li{
position: relative;
display: block;
box-sizing: border-box;
text-decoration: none;
color: #0C4E98;
cursor: pointer;
font-family: roboto, opensans, verdana, sans-serif;
padding-top: 4px;
height: 45px;
}

#cabecalho-secundario ul li {
background: #e0c259;

}

.cor-ae{
background-color: #e8ce71;
}
ul {
position: absolute;
margin: 0;
list-style:none;
}

li {
display: inline-block;
padding: 0px;
position: relative;
}
#cfc{
font-size: 12px; !important
}
li:hover > ul {
display: block;
}
ul ul {
position: absolute;
display: none;
margin: 0;
padding: 0px;
}
ul ul li {
display: block;
}

ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

}

#3

poderá usar Iframe, ele é um campo onde você pode substitui-lo por algo, neste link encontrara todas as informações necessárias, é super simples de se usar.

https://www.w3schools.com/html/html_iframe.asp

mas se você quer fazer com que o menu sempre fique fixo no topo, é só usar a propriedade position: fixed no seu css.

https://www.w3schools.com/cssref/pr_class_position.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=relative

1 curtida
#4

Mas como faria pra incorporar isso ao meu projeot?