Hover drop down menu with different properties from parent - html

Question

I am trying to create a button when hovered over dispays two dropdown menus with different properties using css.
The problem at the moment is that the dropdown menus' properties do not change when hovered over and it seems as if the button expands instead of just showing two different menus below it. (trying to achieve something similar to demo shown here: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-hide-dropdown-on-mouse-hover). Here is the code:
#nav {
margin: 0;
text-align: left;
color: #333;
}
#nav ul {
padding-right: 3.5px;
list-style-type: none;
text-align: left;
display: none;
visibility: hidden;
}
#nav ul li{
margin-left: 0;
padding-left: 0;
color: black;
line-height: 21px;
position: relative;
}
#nav:hover .myClassUl{
visibility: visible;
display: block;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
<button id="nav" class="selected arrow">Communications▼
<ul class="myClassUl">
<li id="emailButton" class="pointerCursor">Email</li>
<li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>
Any help please?

Answer 1

This one works, adjusted your css a little, moved the #nav:hover .myClassUl{ rule after the .myClassUl and added a hover rule for the drop down items
#nav {
margin: 0;
text-align: left;
color: #333;
position: relative;
}
#nav ul {
padding: 0;
margin: 2px;
list-style-type: none;
text-align: left;
display: none;
}
#nav ul li{
margin: 0;
padding: 0;
color: black;
line-height: 21px;
position: relative;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
top: 100%;
width: 50px;
}
#nav:hover .myClassUl{
display: block;
}
#letterButton:hover,
#emailButton:hover {
color: #F99;
}
<button id="nav" class="selected arrow">Communications▼
<ul class="myClassUl">
<li id="emailButton" class="pointerCursor">Email</li>
<li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>

Answer 2

you can try this one:
#nav {
margin: 0;
text-align: left;
color: #333;
}
#nav ul {
padding-right: 3.5px;
list-style-type: none;
text-align: left;
display: none;
visibility: hidden;
}
#nav ul li{
margin-left: 0;
padding-left: 0;
color: black;
line-height: 21px;
position: relative;
}
#nav:hover .myClassUl{
visibility: visible;
display: block;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
.myClassUl #emailButton:hover
{
background: red;
}
.myClassUl #letterButton:hover
{
background: red;
}
FIDDLE EXAMPLE