Issues with a drop down menu - html

Question

I'm using ordered lists to create a menu, and I have run into two issues, the drop down does not align and the hover effect is applied to the drop downs and I don't want that to happen
Here is a JS Fiddle:
http://jsfiddle.net/HFMR5/
this is my HTML code:
<div id="menu">
<ul id="navigation">
<li>Home</li>
<li>Services
<ul>
<li>Residential</li>
<li>Buisiness</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
and this is the CSS for the menu:
/*Navigation CSS*/
#navigation
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
box-shadow: 0 8px 6px -6px black;
}
#navigation li
{
float: left;
}
#navigation li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FF6987;
border-right: 1px solid #ccc;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
#navigation ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#navigation li:hover ul {
display: block;
position: absolute;
}
#navigation li:hover li {
float: none;
font-size: 11px;
}
#navigation li:hover a { background: #f2f2f2; }
#navigation li a:hover
{
color: #FF6987;
background-color: #f2f2f2;
box-shadow: inset 0 8px 6px -6px black;
}

Answer 1

In order for the widths to be the same you need to actually set the width of the sub-menu (Not necessarily static) but if you let it be then it will just expand to the size of the contnent which obviously isn't desired, the CSS changes look like:
#navigation li{
float: left;
position:relative;
}
#navigation li:hover ul {
display: block;
position: absolute;
width: 100%;
}
The position: relative has the sub-menu know to use that element when determining what 100% width is instead of the body tag.
As for the hover effect showing up on sub-menu items all that you need to do is be more specific in your selector. The space you are using signifies that you will select and descendant of #navigation that is a li element. That includes the submenus. If you use a selector like the > which signifies a direct child then you will be able to bre more specific in targeting only top level menu items. CSS looks something like:
#navigation > li > a:hover{
color: #FF6987;
background-color: #f2f2f2;
box-shadow: inset 0 8px 6px -6px black;
}
A good reference for CSS selectors: http://www.w3schools.com/cssref/css_selectors.asp