Good morning!
I'm a beginner in HTML and CSS. I created a web page where I basically have the navigation menu and have the other pages in separate files. I would like that when clicking on a menu option the page was updated and the navigation menu was still available, that is, on any page I visit the menu will be there for navigation to happen. If I had using frames, it would only do with the page being loaded in the frame "content", however I do not use frame and rather DIVs. I've been researching the subject and realized that I need to load the pages into mine. However, as I said, I'm a beginner in HTML and CSS and I have no idea how to do this. Could someone help me with this impediment?
Below the code, only the BODY tag for you to understand the context.
<body>
<div id="cssmenu">
<ul>
<li class='active has-sub'>
<a href='#'>
<span>
Processo CMD
</span>
</a>
<ul>
<li class='has-sub'><a href='#'><span>Sourcing</span></a>
<ul>
<li>
<a href="">
<span>
Dúvidas de Processos
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Aprovações</span></a>
<ul>
<li><a href='#'><span>Peças</span></a></li>
<li class='last'><a href='#'><span>Invest. Buy</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Excessões</span></a>
<ul>
<li class='has-sub'>
<a href='#'>
<span>
Exclusividade
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
Aprovações
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
<li class='has-sub'>
<a href='#'>
<span>
Capacidade Produtiva
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
???
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class='active has-sub'>
<a href='#'>
<span>
Processo CMI
</span>
</a>
<ul>
<li class='has-sub'><a href='#'><span>Sourcing</span></a>
<ul>
<li>
<a href='#'>
<span>
Dúvidas de Processos
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Aprovações</span></a>
<ul>
<li><a href='#'><span>Peças</span></a></li>
<li class='last'><a href='#'><span>Invest. Buy</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Excessões</span></a>
<ul>
<li class='has-sub'>
<a href='#'>
<span>
Exclusividade
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
Aprovações
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
<li class='has-sub'>
<a href='#'>
<span>
Capacidade Produtiva
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
???
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class='active has-sub'>
<a href='#'>
<span>
Géberson
</span>
</a>
<ul>
<li class='has-sub'><a href='#'><span>Sourcing</span></a>
<ul>
<li>
<a href='#'>
<span>
Dúvidas de Processos
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Aprovações</span></a>
<ul>
<li><a href='#'><span>Peças</span></a></li>
<li class='last'><a href='#'><span>Invest. Buy</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Excessões</span></a>
<ul>
<li class='has-sub'>
<a href='#'>
<span>
Exclusividade
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
Aprovações
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
<li class='has-sub'>
<a href='#'>
<span>
Capacidade Produtiva
</span>
</a>
<ul>
<li>
<a href='#'>
<span>
???
</span>
</a>
</li>
<li class='last'>
<a href='#'>
<span>
???
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class='last'>
<a href='#'>
<span>
Géberson R
</span>
</a>
</li>
</ul>
</div>
<div id="conteudo">
</body>