导航菜单的 CSS

Question

我使用 CSS 创建了以下菜单，在我进入下拉菜单之前一切正常。

当我将鼠标悬停在投资组合链接上时，悬停状态有效，但当您进入子菜单时，主链接上的悬停状态消失。

我需要做什么才能在子菜单中的主链接上保持悬停状态？

试图弄明白这让我发疯，但这可能是我忽略的非常简单的事情。提前致谢。我添加了指向我当前使用的 HTML 和 CSS 代码的链接。

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;}

Answer 1

将 ul#navlist li a:hover {... 更改为 ul#navlist li:hover a {...。这使悬停在子菜单内时保持事件状态。

Fiddle