WordPress : La zone cliquable du menu de navigation s’étend bien au-delà du bouton de navigation

Pour une raison quelconque, les icônes de médias sociaux en haut de la barre latérale gauche sur www.hungryrunnergirl.com empêchent le clic sur le widget d’archive directement en dessous. Je n’ai pas ce problème lorsque je rends la position de chaque bouton absolue (le conteneur restant relatif), mais lorsque je le fais, les boutons apparaissent à différents endroits en fonction du navigateur à partir duquel vous visualisez. Quelqu’un a-t-il une idée de la raison pour laquelle cela pourrait se produire (soit le positionnement incohérent lors de l’utilisation de l’absolu, soit les zones non cliquables lors de l’utilisation du positionnement CSS relatif) ?

Voici le code que j’utilise actuellement pour styliser le menu :

/* Menu Container */
.custom .sidebar .menu {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  width: 190px;
  height: 190px;
  position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
    display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: 0px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px 0px;
}
.custom #menu-item-15470 a:hover {
    background-position:0px 0;
}
/* Pinterest */
.custom #menu-item-15471 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
position: relative;
left: 81px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -82px;
}
.custom #menu-item-15471 a:hover {
    background-position:0px -82px;
}
/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-top:10px;
position: relative;
left: 0px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -165px;
}
.custom #menu-item-15472 a:hover {
background-position:0px -165px;
}
/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
margin-top:10px;
position: relative;
left: 81px;
top: -172px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -248px;
}
.custom #menu-item-15475 a:hover {
background-position:0px -248px;
}

Je vous remercie beaucoup pour votre aide.

Solution n°1 trouvée

Ajoutez ce qui suit à li.widget(ligne 191):

position: relative;
z-index: 100;