How to add a dropdown link to an existing responsive navigation menu - html

Question

I have an existing responsive nav menu that I want to add a sub-menu to (actually it is just one link under one of the top menu items). Sounds like it should be very EASY, but I cannot figure it out. As soon as I add the link, it either ends up just below the top item (making the whole nav grow down with it) or displaying "none" makes it disappear and not come back on hover. Is there a simple way to do this with CSS only? I hope my question is clear enough. I will include my necessary code. If you give me code, please tell me where to put it. I am a Newbie. Thanks so much for any help.
HTML:
<nav><a href="index.html">
<div id="logo"><img src="images/logo-text.png" alt="CBS Stuctures, Inc."></div>
</a>
<label for="drop" class="toggle">MENU</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>HOME</li>
<li>COMPLETED PROJECTS</li>
<li>STRUCTURES
<ul>
<li>Video Presentation</li>
</ul>
</li>
<li>NEW PRODUCTS</li>
<li>CONTACT</li>
</ul>
</nav>
CSS:
nav {
height: auto;
margin: 0;
padding: 0;
background-color: #000;
}
#logo {
display: block;
float: left;
padding: 0;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
display: inline-block;
font-size: 1.5em;
list-style: none;
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.toggle, [id=drop] {
display: none;
}
nav a:hover {
color: #70E4FC;
}
nav ul li ul{
display: none;
}
nav ul li ul:hover{
display: block;
}
#media (max-width: 1024px) {
#logo {
display: block;
width: 100%;
text-align: center;
float: none;
padding: 0;
}
nav ul{
width: 100%;
padding:0;
margin:0;
float: none;
background-color: rgba(16,70,56,1.00);
}
nav ul li {
width: 100%;
box-sizing: border-box;
padding: 10px;
background-color:rgba(11,51,41,1.00);
}
nav ul li:hover{
background-color:#0F4739;
}
.toggle + a, .menu{
display: none;
}
.toggle{
display:block;
background-color: #333333;
padding: 14px;
font-size: 1.5em;
cursor: pointer;
}
.toggle:hover {
background-color:#515151;
}
[id^=drop]:checked + ul{
display: block;
}
}

Answer 1

You can simply add a hover selector on child ul inside li of a parent ul
ul li:hover ul {display: block;}
To apply it to specific element, you must add a class to your child ul:
ul li:hover ul.childul {display: block;}
check working example here