Sub Menu visible before hover Plus Sub Menu background uses Parent Hover background

Question

I am hoping that I can get some fresh eyes on this. I know I made a rookie coding mistake somewhere here but I just can't seem to find it and my eyes are going cross-eyed. Please help.

So the sub menu is staying visible even before the hover AND for some reason the background of each sub menu item is taking on the parent hover background properties and I cannot for the life of me figure out why.

I did Fiddle

Here is the code in case you don't want to visit the link

HTML

<div id="menu">
    <ul>
        <li class="current_page_item"><a href="home.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a>
        <ul>
        <li class="style13"><a href="#"><strong>Option 1</strong></a></li>
        <li class="style13"><a href="#"><strong>Option 2</strong></a></li>
        </ul></li>
        <li><a href="#">Comments</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</div>

CSS

#menu {
width: 740px;
height: 60px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
background: #000033 url(images/menu-wrapper-bg2.png) repeat-x left top;
}

#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu ul li {
float: left;
padding: 0px 0px 0px 0px;
}

#menu ul li a {
display: block;
float: left;
height: 60px;
margin: 0px;
padding: 0px 36px 0px 36px;
line-height: 60px;
letter-spacing: -1px;
text-decoration: none;
text-shadow: 2px 2px 2px #00033;
font-family: 'Abel', sans-serif;    
font-size: 23px;
font-weight: normal;
color: #FFFFFF;
border: none;
text-shadow: 2px 2px 2px #0000FF;
}

#menu .current_page_item a {
text-shadow: 2px 2px 2px #0000FF;
background: #000066;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, 
#000066), color-stop(1, #000033));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #000066 0%, #000033 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #000066 0%, #000033 100%);
}

#menu ul li a:hover {
background: #000066;
text-decoration: none;
text-shadow: 2px 2px 2px #0000FF;
color: #FFFFFF;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0,  
#000066), color-stop(1, #000033));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #000066 0%, #000033 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #000066 0%, #000033 100%);
}
#menu ul li ul li.active a, #menu ul li ul li a:hover {
text-decoration:none;
color:#000066;
text-shadow: 2px 2px 2px #0000FF;
}
#menu ul li ul {
height:500px;
left:289px;
overflow:visible;
position:absolute;
top:69px;
width:160px;
float: left;
}
#menu ul li ul li:hover ul li ul {
left:275px;
top:37px;
padding-top: 2em;
padding-left: .90em;
line-height: 30px!important;

}
#menu ul li ul li {
background: #000066;
border:1px solid #ffffff;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#menu ul li ul li a {
color:#ffffff!important;
font-family:'Abel', sans-serif; 
font-size:20px;
line-height:22px;
text-transform:none;
text-shadow: 2px 2px 2px #0000FF;
font-weight:0;
margin:0;
padding:0;
display:block;
padding-top: 5px;

}
#menu ul li ul li.active a, #menu ul li ul li a:hover {
color:#fff!important;
line-height: 30px!important;

}

Answer 1

That CSS doesn't actually hide or reveal the sub menus. Try adding this:

#menu ul ul {
    display: none;
}
#menu li:hover ul{
    display: block;
}