gpt4 book ai didi

css - 如何在我的自定义 CSS 菜单上覆盖部分边框

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

所以这是测试站点:http://rjewkes.com/index.php

如果您滚动菜单项,您会看到“li span”元素位于“li”元素的前面。但我想要相反的方式。我让它们适本地 z-indexed 但由于某种原因它不起作用。

ul#topnav {
margin: 0 0 0 0;
padding: 0;
float: left;
width: 1000px;
height:28px;
list-style: none;
position: relative;
background:url(images/navbar.jpg) no-repeat;
background-position:top left;
z-index:1000;
}
ul#topnav li {
float: left;
margin-top: 0;
padding: 9px 0px 5px 0px;
z-index:1000;
}
ul#topnav li a {
float:left;
padding: 0 25px;
font-size:11px !important;
font-weight:bold;
display: block;
border:#transparent solid 1px;
color: #003654;
text-decoration: none;
z-index:1000;
}
ul#topnav li:hover {
background-color:#FFF;
position:static;
margin: -1px -1px 0 -1px !important;
padding-bottom:15px !important;
border-right: 1px solid #ccc;
border-top:#CCC solid 1px;
border-left:#CCC solid 1px;
z-index:1000;
}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:24px;
display: none;
width: 998px;
background-image:url(images/opacity.png);
color: #ccc;
z-index:1000;
}
ul#topnav li:hover span {
display: block;
height:140px;
border: 1px solid #ccc;
margin-top:7px;
margin-left:-1px;
z-index:997;
-moz-box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
}
ul#topnav li span a {
background: transparent;
font-size:11px !important;
text-align:left;
border-left: 1px solid #ccc;
margin:5px 0 10px -1px;
padding:0 10px 0 20px;
width:100px;
height:130px;
display: inline;
z-index:997;
}
ul#topnav li span a:hover {
text-align:left;
color:#449ec7;
text-decoration: none;
z-index:997;
}
ul#topnav li span img {
position: relative;
float:right;
margin:10px 20px 0 0;
padding:0 0 0 0;
z-index:997;
}

如果有任何有助于解决此问题的反馈,我将不胜感激。

最佳答案

这不是一个完整的答案,但我还不能使用评论功能..

z-index 在这里不起作用,因为只有你的 <span>元素正在使用position:absolute。不管你给 <li> 什么 z-index元素无关紧要,因为 <li>不是绝对定位的,因此必须遵循 DOM 顺序。

不幸的是,我想不出用您当前的标记执行此操作的简单方法。绝对位置 <li> elements 会工作,但那会很乱,如果你想保持菜单的灵 active ,根本不推荐。我可能想到的任何其他解决方案都需要从根本上改变菜单的标记,或者做一个小的设计更改。不幸的是,这是一个非常简单的问题,没有简单的解决方案。

我会继续考虑,我可能会想出一个简单的解决方法。

关于css - 如何在我的自定义 CSS 菜单上覆盖部分边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11234225/

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