CSS - Problem with visibility: hidden; on Dropmenu - html

Question

ul.ulDropMenu{
z-index: 2;
}
ul.ulDropMenu li{
list-style: none;
position: relative;
}
ul.ulDropMenu li ul li a:hover{
color: #ff003c;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
}
nav ul li ul{
visibility: hidden;
display: block;
}
ul.ulDropMenu li:hover ul{
max-height: 290px;
visibility: visible;
opacity: 1;
}
ul.ulDropMenu li ul li{
width: 135px;
}
ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
}
.navBar {
background-color: #2A2A2A;
min-width: 100%;
}
.wrapper {
max-width: 100%;
padding: 0 10px;
-webkit-box-shadow: 0px 2px 7px 3px #8C8C8C;
-moz-box-shadow: 0px 2px 7px 3px #8C8C8C;
box-shadow: 0px 2px 7px 3px #8C8C8C;
padding-top: 3px;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-top: 15px;
}
nav ul a {
color: #7f7f7f;
text-decoration: none;
transition: color .4s ease;
font-size: 18px;
}
nav ul li ul li a{
font-size: 15px;
}
nav ul a:hover {
color: #afafaf;
}
nav li {
display: inline-block;
}
nav #menu-toggle {
display: none;
}
nav .label-toggle {
display: none;
}
nav .wrapper {
align-items: center;
display: flex;
}
#media screen and (max-width: 992px) {
nav nav ul li ul li {
color: #7f7f7f;
padding-right: 20px;
}
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: all 1s ease;
width: 50%;
visibility: hidden;
}
nav li {
color: #53354A;
display: block;
font-size: 19px;
}
nav #menu-toggle:checked ~ ul {
opacity: 1;
height: 62vh;
visibility: visible;
}
nav .label-toggle {
background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
cursor: pointer;
display: block;
float: right;
height: 35px;
margin-top: 35px;
width: 35px;
}
nav .wrapper {
display: block;
}
}
<nav class="navBar">
<nav class="wrapper">
<img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt="">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul class="ulDropMenu">
<li>
Menu 1
</li>
<li>
<a href="#">Menu 2
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
</li>
<li>
<a href="#">Menu 3
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
<i class="fab fa-facebook-square"></i> Facebook
<i class="fab fa-twitter-square"></i> Twitter
<i class="fab fa-instagram"></i> Instagram
</li>
</ul>
</li>
</ul>
</nav>
</nav>
Click on "Run code snipped" and on "full page" to see the snipped, and resize the screen under 992px.
The problem begins when i resize the screen under 992px. The navbar get bigger on the bottom, and the dropmenu don't open, i thought that it maybe was by the fault of the display: block but i don't think it is. I made some tests here and i realized that this problem was caused by this line:
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: all 1s ease;
width: 50%;
visibility: hidden; //This line
}
But if i take out the visibility: hidden; my collapisable menu will not work.
How can i fix it?

Answer 1

You css is very messed up. You have unwanted space on navbar because ul.ulDropMenu is always visible and it has padding-top: 15px inherited from .nav ul and margins inherited from default browser settings.
I suggest you read first about resets
/* basic reset for all elements */
* {
margin: 0;
padding: 0;
border: 0;
}
ul.ulDropMenu{
z-index: 2;
padding: 0; /* override padding set by '.nav ul' */
}
ul.ulDropMenu li{
list-style: none;
position: relative;
}
ul.ulDropMenu li ul li a:hover{
color: #ff003c;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
height: auto; /* override height set in '.nav ul' */
}
nav ul li ul{
visibility: hidden;
display: block;
}
ul.ulDropMenu li:hover ul{
max-height: 290px;
visibility: visible;
opacity: 1;
z-index: 1;
}
ul.ulDropMenu li ul li{
width: 135px;
}
ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
}
.navBar {
background-color: #2A2A2A;
min-width: 100%;
}
.wrapper {
max-width: 100%;
padding: 0 10px;
-webkit-box-shadow: 0px 2px 7px 3px #8C8C8C;
-moz-box-shadow: 0px 2px 7px 3px #8C8C8C;
box-shadow: 0px 2px 7px 3px #8C8C8C;
padding-top: 3px;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-top: 15px;
}
nav ul a {
color: #7f7f7f;
text-decoration: none;
transition: color .4s ease;
font-size: 18px;
}
nav ul li ul li a{
font-size: 15px;
}
nav ul a:hover {
color: #afafaf;
}
nav li {
display: inline-block;
}
nav #menu-toggle {
display: none;
}
nav .label-toggle {
display: none;
}
nav .wrapper {
align-items: center;
display: flex;
}
#media screen and (max-width: 992px) {
nav nav ul li ul li {
color: #7f7f7f;
padding-right: 20px;
}
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: all 1s ease;
width: 50%;
visibility: hidden;
}
nav li {
color: #53354A;
display: block;
font-size: 19px;
}
nav #menu-toggle:checked ~ ul {
opacity: 1;
height: 62vh;
visibility: visible;
}
nav .label-toggle {
background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
cursor: pointer;
display: block;
float: right;
height: 35px;
margin-top: 35px;
width: 35px;
}
nav .wrapper {
display: block;
}
}
<nav class="navBar">
<nav class="wrapper">
<img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt="">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul class="ulDropMenu">
<li>
Menu 1
</li>
<li>
<a href="#">Menu 2
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
</li>
<li>
<a href="#">Menu 3
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
<i class="fab fa-facebook-square"></i> Facebook
<i class="fab fa-twitter-square"></i> Twitter
<i class="fab fa-instagram"></i> Instagram
</li>
</ul>
</li>
</ul>
</nav>
</nav>