HTML submenu won't work - html

Question

I am trying to make a website with a dropdown menu. After reading several guides and even searching here, The menu keeps doing weird stuff. I tried a lot of things so some lines may become superfluous.
The submenu is not underneath the menu but next to it.
Someone that can help me?
thx in advance
html:
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Hardware
<ul>
<li>Hardware2</li>
<li>Hardware3</li>
</ul></li>
<li>About Us</li>
<li>sjabloon</li>
<li>Contact Us
</li>
</ul>
</div> <!-- menu -->
Css:
#menu
{
position: absolute;
right: 0;
}
#menu ul
{
display: inline-block;
line-height: 1em;
position: relative; /* naast elkaar*/
right: 0;
top: 2em;
list-style: none;
/*display: inline-table;*/
}
/*
#menu ul: after
{
content: "";
clear: both;
display: inline-block;
}*/
#Menu ul ul {
display: none;
}
/*
#Menu ul li:hover > ul
{
display: inline-block;
}
*/
#menu ul li
{
float: left; /* op een lijn */
margin-left: 0.50em;
padding: 1em 1.5em;
letter-spacing: 0.20em;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
color: #OOC;
outline: 0;
}
#menu ul li:hover {
background: #00F;
}
#menu ul li:hover a {
color: #FFF;
}
#menu ul li a /*#menu ul li span*/
{
display: inline-block
margin-left: 0.50em;
letter-spacing: 0.20em;
text-decoration: none; /* geen onderlijning*/
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #OOC;
}
#menu ul ul /* submenu*/
{
background: #00F;
top: 100%;
padding: 0;
position: absolute;
visibility: hidden;
}
#menu ul:hover ul
{
visibility:visible;
}
#menu ul ul li
{
float: none; /*onder mekaar */
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
position: relative;
color: #FFF;
}

Answer 1

This will help you:
HTML
<div id="menu">
<ul>
<li class="current_page_item">Home
<ul>
<li>Hardware2</li>
<li>Hardware3</li>
</ul>
</li>
<li>Hardware
<ul>
<li>Hardware2</li>
<li>Hardware3</li>
</ul>
</li>
<li>About Us
<ul>
<li>Hardware2</li>
<li>Hardware3</li>
</ul>
</li>
<li>sjabloon
<ul>
<li>Hardware2</li>
<li>Hardware3</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>Hardware2</li>
<li>Hardware3</li>
</ul>
</li>
</ul>
</div>
StyleSheet
#menu {
position: absolute;
right: 0;
}
#menu ul {
display: inline-block;
line-height: 1em;
position: relative;
/*right: 0;*/
top: 2em;
list-style: none;
}
#menu ul li {
float: left;
padding: 1em 1.5em;
letter-spacing: 0.20em;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
color: #00C;
outline: 0;
}
#menu ul li a {
display: inline-block;
margin-left: 0.50em;
letter-spacing: 0.20em;
text-decoration: none;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #00c;
}
#menu ul li:hover {
background: #00F;
}
#menu ul li:hover a {
color: #FFF;
}
#menu ul:hover ul {
visibility: visible;
}
#menu ul ul {
/*display: none;*/
background: #00F;
top: 100%;
padding: 0;
position: absolute;
visibility: hidden;
}
#menu ul ul li {
float: none;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
position: relative;
color: #FFF;
}
Here is the Demo

Answer 2

This is certainly not complete, but it should give you a good start. The main thing I would suggest is focusing on your ul li groupings: JS Fiddle
HTML
<div id="menu">
<ul>
<li class="current_page_item">Home
<ul>
<li>Hardware2
</li>
<li>Hardware3
</li>
</ul>
</li>
<li>Hardware
<ul>
<li>Hardware2
</li>
<li>Hardware3
</li>
</ul>
</li>
<li>About Us
<ul>
<li>Hardware2
</li>
<li>Hardware3
</li>
</ul>
</li>
<li>sjabloon
<ul>
<li>Hardware2
</li>
<li>Hardware3
</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>Hardware2
</li>
<li>Hardware3
</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
position: absolute;
right: 0;
}
#menu ul {
display: inline-block;
line-height: 1em;
position: relative;
/* naast elkaar*/
right: 0;
list-style: none;
/*display: inline-table;*/
}
/*
#menu ul: after
{
content: "";
clear: both;
display: inline-block;
}*/
#Menu ul li ul {
height: 0;
}
#Menu ul li:hover > ul {
height: 10px;
}
#menu ul li {
/* op een lijn */
padding: 1em;
letter-spacing: 0.20em;
font-size: 0.90em;
text-transform: uppercase;
color: #OOC;
outline: 0;
}
#menu ul li:hover {
background: #00F;
}
#menu ul li:hover a {
color: #FFF;
}
#menu ul li a
/*#menu ul li span*/
{
letter-spacing: 0.20em;
text-decoration: none;
/* geen onderlijning*/
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #OOC;
}
#menu ul li ul
/* submenu*/
{
width: 86px;
background: #00F;
height: 0;
overflow: hidden;
text-align: center;
display: block;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
position: absolute;
}
#menu ul:hover > li ul {
height: 90px;
width: 86px;
padding: 20px;
}
#menu ul li ul li {
/*onder mekaar */
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
color: #FFF;
}