Question

我有一个顶级菜单栏，当鼠标悬停在每个菜单项上时，它会变为紫色。

其中一个菜单还有一个其他项目的下拉列表。当我将鼠标光标向下移动通过这些子菜单时，顶部菜单将返回到原始样式。即使我在子菜单项上空盘旋，我也希望它能保持紫色。网站为here，如果您将鼠标悬停在＆＃34;关于＆＃34;下的子菜单上它显示了问题。

我搜索了一些类似的stackoverflow答案。例如，此问题和previous answer here。我试过改变这个

#topnav li a:hover {}

到

#topnav li hover:a {}

但这没有提出改变或原始菜单保持顶部菜单紫色。完整代码如下：

#topnav {
    clear: both;
    background: url(nav-bg-orange.png) no-repeat;
    height: 87px;
    width: 962px;
    padding: 6px 63px 6px;
}

#topnav ul {
    list-style: none;
    float: left;
}

#topnav ul li {
    list-style: none;
    float: left;
    padding: 3px 0 0 0;
    border-left: 1px dashed #f38739;
}

#topnav ul li:last-child {
     border-right: 1px dashed #f38739;
 }

#topnav ul li a {
    float: left;
    display: block;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 15px 20px 15px 20px;
    border: 0;
    outline: 0;
    line-height: 1;
    list-style-type: none;
    text-transform: uppercase;
}

#topnav li#active a,
#topnav li:hover a {
    color: #fff;
    background: #745b7c;
    display:block;
    border-radius: 5px 5px 0 0;
}


/****************************** flyout menus ******************************/

#wsite-menus .wsite-menu li a {
    font-family: Tahoma, Geneva, sans-serif;
    padding: 11px;
    color: #fff;
    background: #745b7c;
    border: 0;
    border-bottom: 1px dashed #9e89a4;
}

#wsite-menus .wsite-menu li:hover a {
    color: #fff;
    background: #8c7395;
}

Answer 1

您可能想尝试点击

#wsite-menus

菜单嵌套在带有类

的元素中

.wsite-nav-3

在这种情况下它应该可以正常工作。

<li id="pg524622535697207710" class="wsite-nav-3" style="position: relative;"><a href="/about.html" style="position: relative;">About </a><div id="wsite-menus"><div class="wsite-menu-wrap" style="position: absolute; left: -1118px; display: block; top: 47px;"><ul class="wsite-menu" style="display: block;"><li id="wsite-nav-977240454937878932" style="position: relative;"><a href="/hatha-yoga.html" style="position: relative;"><span class="wsite-menu-title">Hatha Yoga</span></a></li><li id="wsite-nav-788960178245244400" style="position: relative;"><a href="/yin-yoga.html" style="position: relative;"><span class="wsite-menu-title">Yin Yoga</span></a></li><li id="wsite-nav-226130023988115977" style="position: relative;"><a href="/yoga-for-men.html" style="position: relative;"><span class="wsite-menu-title">Yoga for Men</span></a></li><li id="wsite-nav-104813911397431638" style="position: relative;"><a href="/prenatel-yoga.html" style="position: relative;"><span class="wsite-menu-title">Prenatel Yoga</span></a></li><li id="wsite-nav-176000207649938754" style="position: relative;"><a href="/private-classes.html" style="position: relative;"><span class="wsite-menu-title">Private Classes</span></a></li><li id="wsite-nav-558168910269966978" style="position: relative;"><a href="/yoga-for-business.html" style="position: relative;"><span class="wsite-menu-title">Yoga for Business</span></a></li></ul></div></div> </li>

我自己没有检查过，但很有可能它没问题。

Answer 2

我让一位朋友为我看看这个。在ordre修复菜单我需要更改当前动画子菜单的javascript。不幸的是，因为我使用的是基于Weebly的模板，所以我无法访问此代码来更改它。所以看起来像一个死胡同。

Answer 3

对不起。你是CSS新手吗？您所要做的就是使用UL：HOVER。那是因为您要从LI中移除鼠标。因此，使用UL作为触发器。即使你改变了LI，UL也不会有所改变。：）

当光标移动到子菜单时，css顶级菜单不会停留在悬停的样式中

3 个答案: