Dropdown isn't showing everything in CSS - html

Question

So I am trying to make a basic nav menu with a drop down from my Django app. My menu is fine, but the dropdown doesn't want to show all the links.
How to fix this?
HTML
<nav role="navigation">
<ul>
<li>Chat Home</li>
<li>Go To <i class="fa fa-caret-down"></i>
<ul class="dropdown" aria-label="submenu">
<li>Calendar</li>
<li>Big Blue</li>
</ul>
</li>
<li>Logout</li>
</ul>
</nav>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: sticky;
position: -webkit-sticky;
width: 100%;
height: 1.5rem;
}
li {
float: left;
font-size: 1rem;
padding: 0.25rem 1rem;
letter-spacing: 1.5px;
cursor: pointer;
display: block;
position: relative;
}
li a {
color: white;
text-decoration: none;
text-align: center;
}
ul li ul li {
display: block;
padding: 0.25rem 1rem;
}
li:hover,
li:focus-within {
background-color: black;
}
li:focus-within a {
outline: none;
}
ul li ul {
display: none;
background-color: #333;
position: absolute;
visibility: hidden;
left: 0;
margin-top: 2px;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
display: block;
visibility: visible;
}
You can see what I mean here: https://jsfiddle.net/rj269hsf/
But essentially, when I hover over the "Go To" item it will drop the first listed item below it. The only way to see the second is to move down and hover where it would be, then it shows up.

Answer 1

You can fix the problem by wrapping the dropdown <ul> in a <div>. I also gave the nav item with the dropdown the class of .dropdown-btn to make the CSS easier to understand.
The ul li:hover > ul selector you've used is also incorrect - I replaced it with .dropdown-btn:hover ul which selects the ul which is a child of .dropdown-btn but only when it is hovered.
Lastly, you don't need both visibility and display to hide the dropdown, simply display: none will do.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: sticky;
position: -webkit-sticky;
width: 100%;
height: 1.5rem;
}
li {
float: left;
font-size: 1rem;
padding: 0.25rem 1rem;
letter-spacing: 1.5px;
cursor: pointer;
display: block;
position: relative;
}
li a {
color: white;
text-decoration: none;
text-align: center;
}
/*ul li ul li {
display: block;
padding: 0.25rem 1rem;
}*/
li:hover,
li:focus-within {
background-color: black;
}
/*li:focus-within a {
outline: none;
}*/
.dropdown {
display: none;
background-color: #333;
position: absolute;
left: 0;
margin-top: 2px;
}
/*ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
display: block;
visibility: visible;
}*/
.dropdown-btn:hover .dropdown {
display: block;
}
<nav role="navigation">
<ul>
<li>Chat Home</li>
<li class="dropdown-btn">
Go To <i class="fa fa-caret-down"></i>
<div class="dropdown">
<ul aria-label="submenu">
<li>Calendar</li>
<li>Big Blue</li>
</ul>
</div>
</li>
<li>Logout</li>
</ul>
</nav>

Answer 2

You just need to add two properties width and height to the class .dropdown i.e. in your CSS ul li ul. JSFiddle
ul li ul {
/* already mentioned styles */
width: fit-content;
width: -moz-fit-content; /* Firefox support */
height: fit-content;
height: -moz-fit-content;
}