Хочу создать топ меню. header
позиционирован как fixed
, но обратите вниманию на inner_content
у него z-index -1
всё равно стоит над header-ром
/* setting */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.outline {
outline: 1px solid #f00;
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
/* header */
header {
background: rgba(14, 13, 33, .8);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
/* navigation */
nav {
display: flex;
align-items: center;
color: #fff;
}
/* Logotype h2 */
.nav-logo {
flex: 1;
}
/* content menu */
.top_menu_content {
width: 700px;
display: flex;
justify-content: space-around;
}
.top_menu_content>li {
position: relative;
z-index: 10;
}
/*content links */
.content_link {
display: inline-block;
padding: 20px;
color: #fff;
transition: .2s;
}
.content_link:hover {
color: #fca505
}
.content_link:hover .arrow {
border-color: #fac505 transparent transparent transparent;
}
/* arrow for link */
.arrow {
display: inline-block;
margin-left: 10px;
border: 5px solid;
border-color: #fff transparent transparent transparent;
}
/* inner content */
.inner_content {
position: absolute;
top: 50%;
left: 0;
background: rgba(0, 0, 0, .5);
border-top: 2px solid #fca505;
transition: .5s;
z-index: -1;
}
/* inner links */
.inner_link {
display: inline-block;
min-width: 200px;
padding: 10px;
color: #fff;
transition: .2s;
border-bottom: 1px solid rgba(0, 0, 0, .3);
}
.inner_link:hover {
padding-left: 20px;
color: #fca505;
background: rgba(0, 0, 0, .1);
}
<header>
<div class="container">
<nav>
<h2 class="nav-logo">Logotype</h2>
<ul class="top_menu_content ">
<li><a class="content_link" href="#">item 1</a></li>
<li>
<a class="content_link" href="#">item 2 <span class="arrow"></span></a>
<ul class="inner_content">
<li><a class="inner_link" href="#">inner items 1</a></li>
<li><a class="inner_link" href="#">inner items 2</a></li>
<li><a class="inner_link" href="#">inner items 3</a></li>
<li><a class="inner_link" href="#">inner items 4</a></li>
<li><a class="inner_link" href="#">inner items 5</a></li>
</ul>
</li>
<li><a class="content_link" href="#">item 3</a></li>
<li><a class="content_link" href="#">item 4</a></li>
<li><a class="content_link" href="#">item 5</a></li>
</ul>
</nav>
</div>
</header>
z-index
, это плохая практика, лучше делайте положительный