jquery - 我的 header CSS 和 jQuery 有问题

Question

嘿，我的标题在 http://www.willruppelglass.com/ 上会有点麻烦

导航是我想要的位置，但是如果您将鼠标悬停在图库上，子菜单就在右边太远的地方……我正在尝试向右一点点。填充和边距不起作用:(

这是我的 CSS:

.headerNav{
    color:#FFF;
    padding-left: 150px;
    padding-top: 148px;
}

.headerNav ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNav li{
    float:left;
}

.headerNav ul a{
    font-size:24px;
    color:#FFF;
    display:block;
    padding:0 55px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNav ul a:hover{
    color:#a40404;
    text-decoration:none;
}

.headerNavGallery{
    color:#000;
    padding-top:30px;
    padding-left:250px;
}

.headerNavGallery ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNavGallery li{
    float:left;
}

.headerNavGallery ul a{
    font-size:24px;
    color:#000;
    display:block;
    padding:0 15px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNavGallery ul a:hover{
    color:#a40404;
    text-decoration:none;
}

我的 Jquery:

    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

和我的 HTML:

<div class="headerNav">
<ul>
<li><a href="index.php?action=view">Home</a></li>
<li><a href="#" class='galleryNavToggle'>Gallery</a></li>
<li><a href="#" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->




<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

谁能告诉我我做错了什么？

Answer 1

我认为你必须将你的 headerNavInfo div 放在 headerWrapperDiv 之外(就在下面)并将填充设置为零像素