CSS for Navigation Menu

I created the following menu with CSS and everything works fine until I get to the dropdown menu.

The hover state works when I hover over the portfolio link but when you go into the sub-menu, the hover state on the main link goes away.

What do I need to do to keep the hover state active on the main link whilst in the submenu?

Driving me crazy trying to figure it out yet it's probably something very simple that I'm overlooking. Thanks in advance. I've added a link to the HTML and CSS code I'm currently using.

http://jsfiddle.net/outlaw5582/PtCtL/1/

HTML:

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="index.html" class="current">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="">Portfolio</a>
            <ul id="subnavlist">
                <li id="subactive"><a href="cdcovers.html" id="subcurrent" name="subcurrent">CD Covers</a></li>
                <li><a href="logos.html">Logos</a></li>
                <li><a href="flyers.html">Flyers</a></li>
                <li><a href="businesscards.html">Business Cards</a></li>
                <li><a href="photos.html">Photo Enhancements</a></li>
            </ul>
        </li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

CSS:

#navcontainer {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight: bold;
    text-decoration: none;
    height:37px;}

ul#navlist, ul#navlist ul, ul#navlist li {
    list-style-type: none;}

ul#navlist {margin:0 0 30px 0;}

ul#navlist li {display:inline;}

ul#navlist li a {padding: 8px 10px 7px 10px;
    background:#000000;
    border-bottom:3px #00aeef solid;
    text-decoration:none;
    color:#FFF;
    margin:0 -3px 0 -2px;}

ul#navlist li a:hover {color:#000;
    background:#00aeef;}

ul#navlist li a:active {color: #000;
    background: #00aeef;}

ul#navlist li a.current {color:#000;
    background:#00aeef;}

ul#subnavlist {display:none;
    text-align:left;
    padding: 5px 9px 0 9px;
    font-weight: bold;
    text-decoration:none;
    clear:both;
    margin:0 0 0 128px;
    box-shadow:2px 2px 4px #000;
    position:relative;
    top:29px;}

ul#subnavlist li {float:none;}

ul#subnavlist li a {background:#A1BF73;
    font-size:12px;
    margin-top: 0px;
    color:#000;
    height:21px;}

ul#navlist li:hover ul#subnavlist {display: block;
    position: absolute;
    margin-top:7px;
    padding-right:0;}

ul#navlist li:hover ul#subnavlist li a {display: block;
    border: none;
    padding: 5px 10px 9px 10px;
    margin-left:-9px;
    margin-top:-7px;
    margin-bottom:-5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    background:#00aeef;}

ul#navlist li:hover ul#subnavlist li a:hover {
    background:#000000;
    color:#FFFFFF;
    padding: 5px 10px 9px 10px;}

ul#navlist li:hover {background:#00aeef;}