Horizontal dropdown menu not working - html

Question

Please take a look at this Fiddle:
https://jsfiddle.net/wd9wj7oe/1/
CODES:
HTML
<nav id="navigation">
<ul class="menu">
<li>home</li>
<li>about</li>
<li>products</li>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ul>
<li>help</li>
<li>join us</li>
<li>contact</li>
</ul>
</nav>
CSS:
#navigation{
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li{
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul{
left: 0;
top: 100%;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li{
display: none;
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul{
display:block;
}
As you can see, there are two main problems happening here:
1 - The sub menu is not showing up when i hover over "products", as it should.
2 - Even if it would show up, the sub is not positioned correctly.
Help please!

Answer 1

You have the wrong markup for a drop-down menu
instead
<ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
<li>item 3</li>
</ul>
to
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
</li>
<li>item 3</li>
</ul>
ul{
padding: 0;
}
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
list-style: none;
float:left;
padding-left: 28px;
position: relative;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation ul ul {
position: absolute; left: auto; top: 100%;
list-style: none;
display: none;
z-index: 1000;
}
#navigation ul ul li {
float: none;
padding: 0;
}
<nav id="navigation">
<ul class="menu">
<li>home
</li>
<li>about
</li>
<li>products
<ul>
<li>Line 1
</li>
<li>Line 2
</li>
<li>Line 3
</li>
<li>Line 4
</li>
<li>Line 5
</li>
</ul>
</li>
<li>help
</li>
<li>join us
</li>
<li>contact
</li>
</ul>
</nav>

Answer 2

You have to hide the ul and not the li element. And for the positioning, you have to set position: relative on #navigation li.
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
position: relative;
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul {
display: none;
left: 0;
top: 100%;
width: 6em;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li {
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul {
display:block;
}
https://jsfiddle.net/wd9wj7oe/5/