gpt4 book ai didi

css - 导航菜单可点击区域延伸到导航按钮之外

转载 作者:太空宇宙 更新时间:2023-11-04 15:24:11 24 4
gpt4 key购买 nike

出于某种原因,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;
}

非常感谢您的帮助。

最佳答案

将以下内容添加到 li.widget(第 191 行):

position: relative;
z-index: 100;

关于css - 导航菜单可点击区域延伸到导航按钮之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14224508/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com