Q:

Vertical Navigation Issues

I've been trying to style a vertical sub navigation menu in Wordpress for what seems like eons. It seems I can get one part to work but then it causes issues for another part. Currently, I have an issue with the bottom element showing a border and when hovering it highlights the parent element along with the one you are hovering. I know WHY it is happening, I just don't understand how to fix it without it messing up the border-radius or borders.
I've tried many variations of CSS and nothing seems to produce the desired result. If anyone could point me in the correct direction, I'd appreciate it. 
The subnav can be viewed here: http://compadv.dpdev.net/services/corporate-governance
Here is the current CSS:
#subnav {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}
.sub-nav-menu {
margin-bottom: -1px;}

.sub-nav-menu li {
    background: #85974f;
    }

.sub-nav-menu li a {

border-bottom: 1px solid #717f43;
    padding: 15px 15px;
    font-weight: bold;
text-transform: uppercase;
    font-size: 14px;
    font-family: 'Droid Sans', Arial, Helvetica, serif;
    display: block;
    color: #fff;

}
.sub-nav-menu li:hover {
    background: #7f8c50;

}

.sub-nav-menu a:hover { text-decoration: none;}
.sub-nav-menu .current_page_item {background: #7f8c50;}

.sub-nav-menu li:first-child {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.sub-nav-menu li:last-child {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

#subnav a:active {text-decoration: none; }
#subnav .children {padding: 0; list-style-type: none; }
#subnav .children li a {padding-left: 30px; font-size: 13px;}

A:

This should take care of the hover on child highlighting the parent and the border issues.
CSS:
#subnav {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}
.sub-nav-menu {
    margin-bottom: -1px;
}
.sub-nav-menu li {
    background: #85974f;
}
.sub-nav-menu li a  {
    border-bottom: 1px solid #717f43;
    padding: 15px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    font-family:'Droid Sans', Arial, Helvetica, serif;
    display: block;
    color: #fff;
}
.sub-nav-menu li a:hover {
    background: #7f8c50;
}
.sub-nav-menu a:hover {
    text-decoration: none;
}
.sub-nav-menu .current_page_item {
    background: #7f8c50;
}
.sub-nav-menu li:first-child, .sub-nav-menu li:first-child a {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.sub-nav-menu li:last-child, .sub-nav-menu li:last-child a {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.sub-nav-menu > li:last-child > a {
    border-bottom: none;
}

#subnav a:active {
    text-decoration: none;
}
#subnav .children {
    padding: 0;
    list-style-type: none;
}
#subnav .children li a {
    padding-left: 30px;
    font-size: 13px;
}

DEMO: JSFiddle

