我刚刚将我的网站变成了响应式布局,并且在此过程中,我设法让我的下拉菜单不起作用。当悬停在“下拉菜单”上时,除非我使用位置:相对,否则它们不会显示。他们在使用 position: absolute 之前工作过——但现在他们似乎只使用 position relative。使用相对时,它使用的宽度会弄乱导航栏。
使用相对:http
://d.pr/i/tp5R
使用绝对:http ://d.pr/i/j7r1
我的子菜单的 CSS
div.left_first_header ul.sub-menu {
width: 125px;
top: 14px;
z-index: 2;
height: 100%;
position: absolute;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
background: url(images/drop_down_bg.jpg);
padding-left: 15px;
padding-right: 15px;
background-repeat: repeat;
}
用于下拉功能的 jQuery
jQuery(document).ready(function ($) {
jQuery("ul.dropdown li").hover(function() {
$('ul:first',this).css('visibility', 'visible');
}, function() {
jQuery(this).removeClass("hover");
jQuery('ul:first',this).css('visibility', 'hidden');
});
});
我的网站
http://wpvault.com/kahlam/
考虑到现在是凌晨 4 点,我可能犯了一个非常愚蠢的简单错误。
如果我遗漏了什么,我深表歉意。