bom dia!
Sou iniciante em HTML e CSS. Criei uma página web onde eu tenho, basicamente, o menu de navegação e tenho as outras páginas em arquivos separados. Eu gostaria que ao clicar numa opção do menu a página fosse atualizada e o menu de navegação continuasse disponível, ou seja, em qualquer página que eu visitar o menu estará lá para que a navegação possa acontecer. Se eu tivesse usando frames, bastaria fazer com a página fosse carregada no frame "conteúdo", porém não uso frame e sim DIVs. Andei pesquisando sobre o assunto e percebi que preciso carregar as páginas na minha . Porém, como eu disse, sou iniciante em HTML e CSS e não tenho ideia de como fazer isso. Alguém poderia me ajudar com esse entrave?
Abaixo o código, somente da tag BODY pra vocês entenderem o contexto.
<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>
require menu.html
(nesse caso usando php). Se quiser usar Jquery pode usar a funçãoload
api.jquery.com/load.