Getting a custom navbar dropdown to align properly - html

Question

i am trying to create a nav bar for my website. the drop down is giving me trouble. how do i align the submenu so that it shows as a proper drop down?
<div id="mainhead">
<div id="title">
<h1>StudiousEnough </h1>
</div>
<li>Home</li>
<li><a href="" >class</a>
<ul>
<li> Class XI </li>
<li> CLass XII </li>
</ul>
</li>
<li><a href="#" >jee</a></li>
<li><a href="aboutus.html" >about us</a></li>
</ul>
and here is the css:
#mainhead #mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainhead #mainnav li {
display: block;
width: 25%;
background-color: #4D4D4D;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
float: left;
padding-bottom: 4px;
padding-top: 4px;
font-family: averia-libre;
font-style: normal;
font-weight: 700;
}
#mainhead #mainnav {
position: absolute;
width: 100%;
left: 0%;
right: 0%;
}
#mainhead #mainnav a{
display:block;
color: #ffffff;
text-decoration: none;
}
#mainhead #mainnav li:hover,#mainhead #mainnav li:focus,#mainhead #mainnav li:active {
background-color: #2535F3;
text-decoration: none;
}
#mainhead #mainnav ul li ul{
display: none;
}
#mainhead #mainnav ul li:hover ul{
display:block;
}

Answer 1

See the fiddle
I've added the following CSS to your CSS
CSS
#mainhead #mainnav ul li ul li{
width:100%;
clear:both;
}

Answer 2

First things first - check your html; you have some problems here. The list item tags need to be enclosed inside the unordered list parent tags. Also I don't see some of the ids and classes existing in the html that is used in your css.
If you always format your code, indenting enclosed blocks, that will help you spot all errors more quickly.
I went ahead and added a parent div with id = 'mainnav' and cleaned up your HTML, and it mostly renders as you'd expect. To get the submenu list items to 'stack' just make width 100%.
Clear is not necessary.
Check out the example on jsfiddle here:
https://jsfiddle.net/pianopaul/r3bb8k24/5/
<div id="mainhead">
<div id="title">
<h1>StudiousEnough </h1>
<div id="mainnav">
<ul class="menu">
<li>Home</li>
<li><a href="" >class</a>
<ul class="submenu">
<li> Class XI </li>
<li> CLass XII </li>
</ul>
</li>
<li><a href="#" >jee</a></li>
<li><a href="aboutus.html" >about us</a></li>
</ul>
</div>
</div>
</div>