Sub-menu doesn't appear on mouse hover

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><a href="home.html">Home</a></li>
      <li class="dropdown"><a>Drinks</a>
        <ul>
          <li><a href="www.google.com">Pan Shots</a></li>
          <li><a href="www.google.com">Tea</a></li>
        </ul>
      </li>
      <li><a href="">Snacks</a></li>
      <li><a href="Desert.html">Desert</a></li>
      <li><a href="Special.html">Special Diet</a></li>
      <li><a href="contact.html">Contact Us</a></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><a href="home.html">Home</a></li>
  <li class="dropdown"><a href="#">Drinks</a>
    <ul>
      <li><a href="www.google.com">Pan Shots</a></li>
      <li><a href="www.google.com">Tea</a></li>
    </ul>
  </li>
  <li><a href="">Snacks</a></li>
  <li><a href="Desert.html">Desert</a></li>
  <li><a href="contact.html">Contact Us</a></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><a href="home.html">Home</a></li>
      <li class="dropdown"><a>Drinks</a>
        <ul>
          <li><a href="www.google.com">Pan Shots</a></li>
          <li><a href="www.google.com">Tea</a></li>
        </ul>
      </li>
      <li><a href="">Snacks</a></li>
      <li><a href="Desert.html">Desert</a></li>
      <li><a href="Special.html">Special Diet</a></li>
      <li><a href="contact.html">Contact Us</a></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>-->