1
.banner1{
background-image: url(../images/bannertemplates.png);
background-repeat: no-repeat;
width:100%;
height:100%;
background-size:cover;
background-attachment: fixed;
position:absolute;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.menu,
.sub-menu {
list-style: none;
background: #000;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
position:absolute;
width:100%;
top:100%;
}
<div class="banner1"></div>
<ul class="menu clearfix">
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a>
<!-- Nível 1 -->
<!-- submenu -->
<ul class="sub-menu clearfix">
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a>
<!-- Nível 2 -->
<!-- submenu do submenu -->
<ul class="sub-menu">
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a>
<!-- Nível 3 -->
<!-- submenu do submenu do submenu -->
<ul class="sub-menu">
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
</ul></li><!-- submenu do submenu do submenu -->
</ul></li><!-- submenu do submenu -->
</ul><!-- submenu -->
</li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
</ul>
I want after the banner 1 leaves the screen (when the menu reaches the top) the menu to set at the top of the screen
http://answall.com/questions/4100/como-fixar-um-menu-horizontal-no-topo-da-janela-ao-rolar-a-p%C3%A1gina
– Higor Senna
@Higorsenna, I’ve tried what’s in there :/
– mihmilicio