Sub-menu doesn't appear on mouse hover - html

Question

I am new to web design. I am trying to create a site where in some menus in menu bar have sub menus. I want on mouse hove it should display submenu which is not happening. This is my code:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown li:hover>ul {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
On mouse hover on 'Drinks' nothing comes up. I want when I move mouse on 'Drikns' sub menus 'Pan Shots' and 'Tea' should be visible and should hide when mouse is not on 'Drinks'.

Answer 1

Your example is kinda messy and there's a lot of unnecessary code, i'm gonna present you with an example that can you work from.
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
}
ul>li {
flex: 1;
background: dodgerblue;
height: 45px;
text-align: center;
}
ul>li>a {
text-align: center;
line-height: 45px;
text-decoration: none;
color: #fff;
}
ul>li>ul {
display: none;
}
ul>li:hover>ul {
display: block;
}
.dropdown>a:after{
content:'▿';
font-weight:bold;
}
<ul>
<li>Home</li>
<li class="dropdown">Drinks
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Contact Us</li>
</ul>

Answer 2

You are mixing display and visibility. Your selector is wrong as well.
.dropdown li:hover>ul
Means that CSS is looking for an li child element of .dropdown to be hovered before something is done with the > ul
Since CSS properties are inherited your text is still white in a child element. Therefor you don't see the text.
Try the following:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown:hover ul {
visibility: visible;
}
.dropdown ul a {
color: black;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->