Html 下拉列表中的父li未更改颜色关闭悬停

我有一个

，悬停时在它下面显示一个

。我终于让边框对齐了，但现在由于某种原因，当我将鼠标悬停在其上时，

li:hover

颜色不会变回原来的颜色。似乎发生的是，当

处于活动状态时，父级

根据CSS保持悬停状态

下面是一个JSFIDLE，显示了正在发生的事情：

---

当显示

且父
未悬停在上方时，我希望父
具有与
中的
元素相同的背景色和边框色。如何在保持整个
的边界完整性的同时最好地解决此问题？
如果您不反对使用某些jQuery，您可以这样做

$('ul#children').hover(
   function(){
       $(this).parent('li').css('background-color','#CCD9FF');
    },   
    function(){
        $(this).parent('li').css('background-color','');
    } 
);

示例：
这是怎么回事：

我这样做是为了#李家长没有围绕ul，改变了一些css，最重要的是，这一个：

#nav li:hover + ul, #nav ul ul:hover {
    display:block;
    z-index:100;
}

更新

并补充说:

#nav li, #nav ul:hover #parent {
    background-color:#CCD9FF;
}

#nav ul:hover #parent {
border-left: 1px solid #99B3FF;
border-right: 1px solid #99B3FF;
    border-top: 1px solid #99B3FF;
}

以前

#nav li#parent:hover { ... }

你可以通过改变

#nav li#parent:hover {

到

你也可以把：

#nav li#parent:hover {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

保持一致性

更新：哎呀。似乎还需要将
边框-*
和
边框半径-*
移动到自己的位置。（从
父级
到
父级a
）

发件人：

致：

我的荣幸@tvalent2！很高兴能帮上忙。这是唯一的变化吗？很好的解决方案。没有jQuery。远远超过公认的答案。：）@bozdoz实际上只需要第一个。第二个变化是因为我觉得它不合适。当我在元素的
和
之间悬停时，似乎有些元素发生了一些移动。例如，将鼠标悬停在
li#parent
上，然后将鼠标悬停在
li#parent a
上，将ul向下移动一点。对于
ul#children
@tvalent2中的
元素也是如此，我已经更新了我的帖子来解决这个问题。我没有像我应该做的那样移动所有的边框属性，这样父对象就会有漂亮的浅蓝色背景。现在应该修复。@tvalent2与边界相关的其他各种不一致之处。就我个人而言，我认为css太复杂了，但它是一个完全固定的版本。这看起来很接近，但是当你从
li#parent
悬停时，有没有办法不让
ul#children li
中的元素收缩一点？一旦进入
并将鼠标悬停在其元素上，它就不明显了，但当您从“父对象”切换到“子对象”时，它就很轻微了。绝对：将border-bottom属性添加到“nav-ul:hover”父对象选择器中。检查它：@bozdoz是
元素中的
元素吗？那是有效的标记吗？我不这么认为。问问写这篇文章的人，我从谷歌的HTML、CSS和JavaScript中了解到了这一点。特别是这段视频：
#nav li#parent:hover {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

#nav li#parent{
    background-color:#FFF;
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover{
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

#nav li#parent {
    background-color:#FFF;
}
#nav li#parent a {
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover a {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}