Menu dropdown isn't hidden beforehand - html

Question

I've added submenus to some code I found online. I want the submenu, which is a drop-down list, only to show when I hover over the appropriate <a>. But the submenu is appearing right from the start without me hovering over it. What am I doing wrong?
div.menu3 {
/*width:500px;margin:0 auto;*/
/*Uncomment this line to make the menu center-aligned.*/
text-align: center;
font-size: 0;
height: 25px;
*position: relative;
*top: 1px;
/*Hacks for IE6 & IE7 */
}
div.menu3 a {
display: inline-block;
padding: 0 20px;
margin-right: 1px;
/* It specifies the distance between each tab */
background: #F7F7F7;
color: Black;
text-decoration: none;
font: normal 12px Trebuchet MS;
line-height: 24px;
border: 1px solid #CAD0DB;
border-bottom: 0;
color: #666;
vertical-align: top;
/*ChangeSet#2*/
text-decoration: none;
}
div.menu3 a:hover,
div.menu3 a.current {
background: #E9ECF0;
line-height: 25px;
color: #000;
}
div.menu3sub {
height: 6px;
border: 1px solid #CAD0DB;
background: #E9ECF0;
}
div.menu3sub a:hover,
div.menu3 a.current {
background: #E9ECF0;
line-height: 25px;
color: #000;
}
<div class="menu3">
Home
Employees
Department
<ul>
<li>Add Department</li>
<li>Delete Department</li>
</ul>
Asset
</div>
<div class="menu3sub"></div>

Answer 1

Your html is off. So your dropdown won't display properly. Use un-ordered lists instead of what you have. This should point you in the right direction.
ul.menu {
list-style-type: none;
}
ul.menu li {
display: inline-block;
}
ul.menu li.submenu ul {
display: none;
position: absolute;
}
ul.menu li.submenu:hover ul {
display: block;
}
ul.menu li.submenu ul li {
display: block;
}
<ul class="menu">
<li>Home
</li>
<li>Employees
</li>
<li class="submenu">Department
<ul>
<li>Add Department
</li>
<li>Delete Department
</li>
</ul>
</li>
<li>Asset
</li>
</ul>