Having trouble with my header CSS & jQuery

Question

Hey ya'll having a bit of trouble with my header at http://www.willruppelglass.com/

the nav is where I want it to be but if you hover hover Gallery, the sub menu is way to far to the right...im trying to get just a little to the right. padding and margins are just not working :(

Here is my 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;
}

my 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();
    }
});

and my 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-->

Can anyone tell me what I am doing wrong?

Answer 1

您是否尝试过设置padding: 0 .headerNav ul a为padding: 0 ？

Answer 2

I think you have to take your headerNavInfo div outside (just under) the headerWrapperDiv and set the padding to zero px

Answer 3

Just change padding-left in your style.css

line number 98

.headerNavGallery {
  padding-left: 285px ;
}

line number 129

.headerNavInfo {
  padding-left: 445px;
}