Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:
Boa noite amigos desenvolvedores
Estou passando por um dificuldade, ate então besta, mas é uma dificuldade kkk
eu tenho um topo que é fixo, dentro desse topo, tem um link que quando é clicado, ele rola ate uma div especifica la no final da pagina, ai surge o problema, quando clico ao chegar até a div, por ser um topo fixo, fica por cima da div, ou seja, ele vai ate a div, mas o topo por ser fixo tampa. o topo tem exatamente 70px, como que eu faço, para ir até a div so que 70px antes, seila algo assim?
conseguiram entender?
Estou com a seguinte dúvida: Quero colocar no meu site, um menu retrátil (que só seja aberto quando o usuário passar o mouse sobre ele) e fixo no topo da página.
Já consegui criar o menu retrátil, o problema é que quando eu tento deixá-lo fixo (usando o comando CSS position:fixed) ele "se desembrulha" quando o mouse passa pela região que deveria seria utilizada por ele (menu) só depois de expandido. Segue abaixo o código utilizado, ficarei muito grato aqueles que puderem me ajudar.
<html>
<head>
<style>
.clearfix:after {display:block; clear:both;}
.menu {width:40px;margin:0px auto;position:absolute;top:-14px;left:-65px;}
.menu li {margin:0px; white-space:nowrap; width:125px; list-style:none;}
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:16px;}
.menu > ul > li > a {padding:10px 40px; display:inline-block;}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {background:"transparent";}
.menu li:hover .sub-menu {z-index:1; opacity:1;}
.sub-menu {width:140%;padding:5px 0px;position:absolute;top:100%;left:0px;z-index:-1;opacity:0;transition:opacity linear 0.15s;box-shadow:0px 2px 3px rgba(0,0,0,0.2);background:#00bcd4;}
.sub-menu li {display:block;font-size:14px;}
.sub-menu li a {padding:10px 30px;display:block;}
.sub-menu li a:hover, .sub-menu .current-item a {background:#33C9DD;color:#FFFFFF;}
</style>
</head>
<body>
<!-- <div style='position:fixed'> -->
<nav class='menu'>
<ul class='clearfix'>
<li>
<a href='#'><b style='background:#99E4EE;'><img src='imagens/menu-20x20.png'/></b></a>
<ul class='sub-menu'>
<li><a href='link1.html' ><b>LINK 1</b></a></li>
<li><a href='link2.html' ><b>LINK 2</b></a></li>
<li><a href='link3.html' ><b>LINK 3</b></a></li>
</ul>
</li>
</ul>
</nav>
<!-- </div> -->
</body>
</html>