2

我尝试了很多解决方案，但没有任何对我有用。当我在特定 HTML 中的“公司”子菜单上时，我想让我的父元素保持悬停状态。

我的 HTML

<nav class="main-menu">
  <ul class="sf-menu sf-js-enabled">
    <li><a href="index.html" class="sf-with-ul">company<span class="menu-arrow"></span><em></em></a>
      <ul >
        <li><a href="#">Welcome Message</a></li>
        <li class=""><a href="#" class="sf-with-ul">Company Profile<span class="menu-arrow"></span></a>
          <ul>
            <li><a href="#">Our Capabilities</a></li>
          </ul>
        </li>
        <li><a href="#">Our History</a></li>
      </ul>
    </li>
    <li class="current"><a href="services.html">services</a></li>
  </ul>
  <div class="clear"></div>
</nav>

我的 CSS：

nav {
position:relative;
background:url(../images/theme/nav.png) repeat-x #e7e7e7;
min-height:68px;
margin:0;
}

.sf-menu ul {
position:absolute;
top:-999px;
display:none;
}

.sf-menu ul li {
width:100%;
}

.sf-menu li {
float:left;
position:relative;
}

.sf-menu>li>a {
display:block;
font-size:12px;
line-height:17px;
color:#2f2e2e;
font-weight:bold;
text-transform:uppercase;
width:189px;
text-align:center;
position:relative;
overflow:hidden;
padding:27px 0 24px;
}

.sf-menu>li>a>em {
display:block;
width:0;
position:absolute;
bottom:200%;
left:50%;
right:50%;
top:auto;
background:#fa5758;
height:3px;
}

ul li:hover>ul {
display:block;
-webkit-animation:fadeIn 1s;
-moz-animation:fadeIn 1s;
-o-animation:fadeIn 1s;
animation:fadeIn 1s;
}

.sf-menu>li>a:hover>em,.sf-menu>li.current>a>em,.sf-menu>li.sfHover>a>em {
bottom:0;
left:0;
right:0;
width:100%;
}

.sf-menu>li {
border-left:1px solid #d0d0d0;
}

.sf-menu>li:first-child {
border-left:none;
}

.sf-menu>li>ul,.sf-menu>li.sfHover>ul {
left:0;
top:68px;
width:190px;
z-index:99;
background:url(../images/theme/sub_ul1.png) repeat-x #676464;
padding:22px 0 24px;
}

.sf-menu>li>ul>li>a {
background:url(../images/theme/sub_li1.png) 0 -50px repeat-x;
color:#fff;
}

.sf-menu li li a:hover,.sf-menu li.sfHover li.sfHover>a {
background-position:0 0;
background-color:#b7b7b7;
color:#454545;
}

.sf-menu li li ul {
left:148px;
top:-22px;
width:190px;
z-index:99;
background:url(../images/theme/sub_ul2.png) repeat-x;
padding:22px 0 23px;
}

.sf-menu li li a {
font-size:11px;
text-transform:uppercase;
display:block;
background:url(../images/theme/sub_li2.png) 0 -50px repeat-x;
color:#454545;
padding:5px 0 5px 29px;
}

.sf-menu li li li a:hover {
background-position:0 0;
background-color:#2d2d2d;
color:#fff;
}

.sf-menu li a .menu-arrow {
display:inline-block;
width:5px;
height:3px;
text-indent:-100%;
font-size:0;
line-height:0;
background:url(../images/theme/menu_arrow.png) no-repeat;
vertical-align:middle;
margin:-3px 0 0 5px;
}

.sf-menu a:hover .menu-arrow,.sf-menu li.current>a .menu-arrow,.sf-menu .sfHover>a:hover
.menu-arrow {
background-position:0;
}

.sf-menu>li>a,.sf-menu em,.list1 a,.button,footer a {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

ul li>ul,#menu-icon {
display:none;
}
4

2 回答 2

7

这是一个简单的 CSS 解决方案：

.sf-menu > li:hover > a {
  background: #444;
}

我只是在此处更改背景以进行说明。我将它放在 CSS 的底部，当我将鼠标悬停在 Company 上并使用其下方的下拉菜单时，主锚点就像悬停一样。

让我知道这是否也适合您，如果确实如此，请不要忘记接受答案或投票，以便人们知道什么是有效的。

这是该工作的图像

由于您的问题是关于将橙色条保留在那里的具体问题，因此您必须首先知道橙色条是与 jQuery 一起应用的，带有一个名为.sfHover... 的类，因此父<li>级有这个类，它使橙色条在那里保持活动状态。

使用 jQuery 的小提琴

于 2013-08-02T13:51:16.203 回答
2

如果你想使用 jQuery，下面的一个可能会对你有所帮助： 

 $(document).ready(function() {     
        $('#child').hover(function(){     
            $('#parent').addClass('hoverClass');    
        },     
        function(){    
            $('#parent').removeClass('hoverClass');     
        });
    });
于 2013-08-02T13:31:23.687 回答