<header>
<a href="#" >LOGO</a>
<input type="checkbox" id="menu">
<label for="menu"><i ></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>*{
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;
}
}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.
CodePudding user response：
OK, you mentioned display: none fixed your problem but visibility: hidden doesn't. It happens because display: none is basically like removing the element from the flow of the page. but visibility keeps the element position it's just hidden but it actually there that's why you get your result like this.
read this answer visibility:hidden vs display:none
CodePudding user response：
where you add given visibility:hidden than add font-size:0px; to give like display none effect
With visibility:hidden the object still takes up vertical height on the page. With display:none it is completely removed. If you have text beneath an image and you do display:none, that text will shift up to fill the space where the image was. If you do visibility:hidden the text will remain in the same location.