Drop down menu on hover using CSS not working - html

Question

I was wondering if anyone could see the bug in my code I am clearly not seeing. I am trying to create a simple navigation bar with a sub menu under 'brands' that appears on hover. Not sure if I am targeting the menu wrong, or what is happening. Any help would be appreciated. Thank you
<div class="nav">
<ul>
<li> Home </li>
<li> History </li>
<li> Brands </li>
<ul>
<li> Proprietary Brands </li>
<li> Licenced Brands </li>
<li> Distributed Brands </li>
</ul>
<li> Corp. Info </li>
<li> Investors </li>
</ul>
</div>
.nav{
width: 100%;
}
.nav ul{
font-size: 1.2em;
text-align: right;
padding-right: 5%;
padding-top: 2%;
list-style: none;
}
.nav li {
text-decoration: none;
padding-left: 2%;
display: inline-block;
}
.nav li li{
font-size: 1em;
}
.nav li ul{
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul{
display: block;
}
.nav li ul li{
display: block;
}

Answer 1

Your html just a bit wrong, it should be
...
<li>
<ul> ... </ul>
</li>
...
instead
...
<li> ... </li>
<ul> ... </ul>
<li> ... </li>
...
That mean you close li tag that should be the container of too soon, that make your csss for .nav li ul and anything with that become invalid because no structure like that exist in your html