導航菜單可點擊區域延伸過導航按鈕

Question

由於某些原因，www.hungryrunnergirl.com上的左側邊欄頂部的社交媒體圖標會阻止直接點擊下面的存檔窗口小部件。當我將每個按鈕位置設置爲絕對（相對於容器相對）時，我沒有這個問題，但是當我這樣做時，按鈕出現在不同的地方，具體取決於您正在查看哪個瀏覽器。有沒有人有任何洞察到爲什麼會發生這種情況（使用絕對定位時不一致的定位或使用相對CSS定位時的不可點擊區域）？

下面是我目前使用的樣式菜單代碼：

/* 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; 
} 

非常感謝你的幫助。

Answer 1

添加以下li.widget（線191）：

position: relative; 
z-index: 100;