*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: burlywood;
}
header{
width: 100%;
background-color: azure;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 3%;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
}
header .logo{
font-size: 24px;
font-weight: bolder;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-decoration: none;
color: aquamarine;
margin-left: 20px;
animation-name: tuhin;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes tuhin {
from{
color: chartreuse;
}
to{
color: cadetblue;
}
}
header nav ul{
list-style: none;
}
header nav ul li{
float: left;
position: relative;
}
header nav ul li a{
text-decoration: none;
padding: 18px 40px;
display: block;
font-size: 18px;
font-weight: bold;
color: rgb(17, 115, 180);
font-family: monospace;
/* text-align: center; */
transition: background-color .22s ease, color .22s ease;
}
header nav ul li:hover > a{
background-color: #333;
color: darkgrey;
}
header nav ul li ul{
position: absolute;
left: 0;
width: 200px;
background-color: honeydew;
display: none;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
header nav ul li ul li{
width: 100%;
border: 1px solid #333;
}
header nav ul li ul li ul{
left: 200px;
top: 0;
}
header nav ul li:hover > ul{
display: initial;
opacity: 1;
visibility: visible;
}
#menu{
display: none;
}
header label {
font-size: 28px;
font-weight: 500;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: rgb(8, 8, 8);
display: none;
cursor: pointer;
}
@media (max-width:800px){
header{
padding: 20px;
position: relative;
}
header label{
display: initial;
}
header nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: honeydew;
/* display: none; */
opacity: 0;
visibility: hidden;
transition: 0.3s;
height: calc(100vh - 80px);
}
header nav ul li{
width: 100%;
}
header nav ul li ul{
position: relative;
width: 100%;
}
header nav ul li ul li{
background-color: lavender;
}
header nav ul li ul li ul{
width: 100%;
left: 0;
}
#menu:checked ~ nav{
/* display: initial; */
opacity: 1;
visibility: visible;
}
}<header>
<a href="#" class="logo">LOGO</a>
<input type="checkbox" id="menu">
<label for="menu"><i class="fas fa-bars"></i></label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home+</a>
<ul>
<li><a href="#">Web development</a></li>
<li><a href="#">Web development</a></li>
<li><a href="#">Web development+</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Flex Gallery</a></li>
<li><a href="#">Flex Gallery</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</header>enter image description here In the first pic I have used visibility:hidden and in the second one display:none.
I only have one question here,if you see the 2 pictures you will see a weird vertical gap between 2nd and 3rd home menu and here I have used visibility:hidden property.Display:none property fixes this problem but I really want to use the visibility:hidden property to add some fluid transition,how can I fix the vertical gap issue then.
