css submenu not appearing - html

Question

CSS submenu no longer appearing
This was working and I did something to it, I dont know if it is a code problem or a css problem. Forgive me if the post is not formatted correctly,
this is my first time posting at Stackoverflow.
html
<nav class='navClass'>
<ul>
<li>Home</li>
<li>Things To Do</li>
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
</li>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
css
.navClass > ul{
background-color: #e56109;
color:#ffffff;
margin-top: 0px;
font-size: 20px;
font-family: Arial;
}
.navClass > ul li{
list-style-type: none;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
position: relative;
}
.navClass > ul li:hover{
background-color: #212121;
position: relative;
}
ul.sub-menu{
position: absolute;
background-color: #e56109;
list-style-type: none;
width: 200px;
margin-left: -25px;
padding-bottom: 0px;
margin-top: 10px;
opacity: 0;
}
ul.sub-menu li{
padding-left: 25px;
padding-top: 5px;
font-size: 15px;
}
ul.sub-menu li:hover{
color: #ffffff;
display: block;
}
.navClass li:hover .sub-menu{
opacity: 1;
}
The sub-menu items need to drop down from the parent item. In this case, the "Things to Do" item.

Answer 1

There is a simple error in your HTML code.
You have closed the <li> tag before.
Use This:
<nav class='navClass'>
<ul>
<li>Home</li>
<li>Things To Do
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
</li>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>

Answer 2

.navClass > ul{
background-color: #e56109;
color:#ffffff;
margin-top: 0px;
font-size: 20px;
font-family: Arial;
}
.dropdown {
position: relative;
display: inline-block;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .sub-menu {
display: block;
background-color: #000000;
cursor: pointer;
}
.navClass > ul li:hover{
background-color: #212121;
position: relative;
}
<nav class='navClass'>
<ul class='t'>
<li class='b'>Home</li>
<span class="dropdown">
<li>Things To Do</li>
<span>
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>