0

我有一个子菜单，当我将鼠标悬停在父列表上时，它会像预期的那样下降，并且一切都使用悬停颜色，但是当我回到父列表时，它不会显示悬停颜色，直到我在非常顶部/几乎不在列表中..这是填充问题吗？

/* MENU */


 #gen_navigation {

float:right;
margin:0;
padding:0;


 }

#gen_navigation li a, #gen_navigation li {
float:left;
}

 #gen_navigation li {

list-style:none;
position:relative;

}

 #gen_navigation li a {
padding: 35px 20px 23px 20px;
text-decoration:none;
color:white;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #333;
border-bottom: 1px solid #232323;
border-radius:3px;
}

 /* Sub-Menu */
 #gen_navigation li ul {
display:none;
position:absolute;
left:0;
top:100%;
margin:0;
padding:0;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929)); 

}

  #gen_navigation li:hover ul {
display:block;

}
#gen_navigation li ul li, #gen_navigation li ul li a {
float:none;
}


#gen_navigation li ul li a {
 width: 180px;
 display: block;
}

和html

 <ul id="gen_navigation">
            <li class="selected"><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a>
                <ul>
                    <li><a href="#">Gate 5 Energy Partners</a></li>
                    <li><a href="#">Leadership</a></li>
                    <li><a href="#">Key Consultants & Strategic Partners</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Technology</span></a>
                <ul>
                    <li><a href="#">About SERT</a></li>
                    <li><a href="#">About the inventor</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Applications</span></a>
                <ul>
                    <li><a href="#">Agri-Business</a></li>
                    <li><a href="#">WasteWater Industry</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Benefits</span></a>
                <ul> 
                    <li><a href="#">Environmental Benefits</a></li>
                    <li><a href="#">Economic Benefits</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>
4

2 回答 2

2

好吧，我试图让你的代码正常工作，我明白了，但现在我看到 joholo 把它整理出来了。不过，我想我有你的解决方法：通过使用 jQuery's parents()，我将 'selected' 类重新添加到你的 top <li>。

检查这个工作示例

顺便说一句：我认为你的.animate不起作用，所以我猜你正在尝试使用 jQuery-UI 的effect. 也检查一下。

问候！

于 2012-12-14T23:21:31.883 回答
1

可能不是填充问题，在我看来更像是 javascript 事件处理程序问题。

即使您将鼠标悬停在其中一个孩子上，父母仍然在 javascript 中悬停。因此，当您返回父级时，悬停不会为父级触发。

$('li').hover(function(){
    // 1. Parent gets onmouseover (hover) first time. Adds .selected on it's element.
    // 2. When mouse move from parent to child, removes .selected from parent, and adds to child.
    // 3. When back from child to parent, onmouseover (hover) on parent won't fire because it already (technically one of its children) already has onmouseover.
    $('li').removeClass('selected'); 
    $(this).addClass('selected').animate(bounce);        
});

如何以一种好的方式修复它是一个不同的问题:-)

于 2012-12-14T23:12:04.977 回答