Setting dropdown in webpage but with no php - html

Question

I'm trying to use hover property for dropdown but I do not understand
how to use lab1, lab 2, lab 3 ,lab4, lab 5 when they are not defined.
I know how to use hover property but for multiple ul and li is little hard for me to get it.
Dropdowns are not coming down. All my other css properties are fine, I just need help in dropdown property. Any idea?
body {
font: 1.2em Verdana, sans-serif;
background-color: antiquewhite;
}
#header,
#footer {
background-color: #aaa;
padding: 0.5em;
}
#content h1 {
text-align: center;
}
#wrapper {
//background-color: hsl(200, 75%, 40%);
}
#content {
border-left: 8em solid hsl(200, 75%, 40%);
padding: 1em;
background-color: hsl(200, 75%, 60%);
box-sizing: border-box;
}
#leftnav {
float: left;
width: 8em;
box-sizing: border-box;
}
#leftnav ul {
list-style-type: none;
padding-left: 0px;
margin-left: 0px;
}
#leftnav li {
color: white;
background-color: hsl(200, 75%, 30%);
padding: 0.2em 0.5em;
border: solid white;
border-width: 1px 0;
}
#leftnav li:last-child {
border-bottom: none;
}
#leftnav li:first-child {
border-top: none;
}
#leftnav li:hover {
text-decoration: red;
color: red;
font-weight: bold;
text-transform: capitalize;
font-size: 20px;
background-color: white;
}
<div id="nav">
<ul>
<li>Lab 1
<ul>
<li> Basic XHTML </li>
</ul>
</li>
<li>Lab 2
<ul>
<li> Nesting Errors - Fixed </li>
<li> Block and Inline Elements </li>
<li> List of Links </li>
<li> Lab Index </li>
</ul>
</li>
<li>Lab 3
<ul>
<li> Merging Table Cells </li>
<li> Common Page Layout </li>
<li> XHTML Vocabulary </li>
<li> Vocabulary with Examples </li>
</ul>
</li>
<li>Lab 4
<ul>
<li> CSS - HTML Selectors </li>
<li> CSS - More Selectors </li>
<li> Table Styling </li>
<li> CS - Descendant Selectors </li>
</ul>
</li>
<li>Lab 5
<ul>
<li> Body Style </li>
<li> Inheriting Colours </li>
<li> Structuring Text </li>
<li> Another Lab Index </li>
</ul>
</li>
<p class="clearboth"></p>
</ul>
</div>

Answer 1

If i understand correctly, you are making a navbar and try to place the dropdown of the child element when people hover the parent element? The idea of ul-li-ul is that when you hover over a li element, the consequence ul will show up, so you don't actually need to define which lab is going to open which one.
#nav li ul{
display: none;
}
#nav li:hover>ul{
display: block;
position: absolute;
margin-left: 50px;
}
<ul id="nav">
<li>Basic XHTML</li>
<li>LAB 2
<ul>
<li> Nesting Errors - Fixed </li>
<li> Block and Inline Elements </li>
<li> List of Links </li>
<li> Lab Index </li>
</ul>
</li>
<li>LAB 3
<ul>
<li> Merging Table Cells </li>
<li> Common Page Layout </li>
<li> XHTML Vocabulary </li>
<li> Vocabulary with Examples </li>
</ul>
</li>
</ul>
Hope this helps.

Answer 2

You may use select tag. Example:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
Code taken at: w3schools