Question

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

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

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

让我疯狂地试图解决它但它可能非常简单，我忽略了。提前致谢。我添加了一个指向我正在使用的HTML和CSS代码的链接。

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

导航菜单的CSS

1 个答案: