Dropdown menu in HTML/CSS doesn't actually "drop down" - html

Question

I'm trying to add a drop-down menu for one of the options in my nav menu for a simple html page. However, when I hover over the nav menu option, the menu doesn't actually drop down. It just replaces the nav menu option with the first option in the drop-down whenever I hover over it. I'm not exactly sure why it isn't "dropping down".
Any help would be really appreciated... Here's the HTML for the nav and attempted drop-down.
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
and here is the CSS snippet for the Dropdown menu:
.dropdown {
float: left;
background-color: #FFF0F5;
width: 100%;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #FFF0F5;
height: 200px;
width: 100%;
z-index: 1;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownContent a:hover {background-color: #fff8dc;}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
I'm not really sure why the drop-down part isn't displaying, i'm sure it's some stupid mistake but it's eluded me for an hour and a half...

Answer 1

I see you have mentioned position: absolute in dropdownContent class. This is causing to overlap. Just remove it and try. By default it sets to static, which mean Elements render in order, as they appear in the document flow. Where as absolute means element is positioned relative to its first positioned ancestor element.

Answer 2

The problem is in your HTML.
For the dropdown within an item of the 1st level you'll need a code block that looks like your 1st level. That is, another <ul> with a group of <li>s one for each 2nd level option.

Answer 3

You have a lot of unwanted css and markup. Just fix it. I have created a basic one for you. May be you can try,
.dropdownContent {
display: none;
background-color: #FFF0F5;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropdownContent a{
display: block;
}
.dropdown:hover .dropdownContent {
display: block;
z-index: 1;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">
History
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>