gpt4 book ai didi

jquery - 具有悬停效果的简单嵌套 ul li 菜单,但有关 margin-top 的问题

转载 作者:行者123 更新时间:2023-11-28 10:15:21 24 4
gpt4 key购买 nike

我的代码:

$("#navShop li").hover(function () {
$(this).find("ul.subCatMenu").stop(true, true).show();
},
function () {
$(this).find("ul.subCatMenu").stop(true, true).hide();
});

JS 和我的 HTML 中没有什么特别之处:

<ul class="nav navbar-nav navbar-right">
<li><a href="/" id="home">Home</a></li>
<li><a href="About">About</a>
<ul class="subCatMenu">
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</li>
</ul>

问题是当你悬停时,设计师想要一条线,所以只是一个

a:hover{ border-bottom: 1px solid green;}

但是二级ula之间有几个像素当我将光标移动到二级ul时,它消失了当鼠标在边框上时的 a 或它的边缘。解释我可怜的没有 photoshop 的图像:红色 = 边距,蓝色 = 填充,绿色 = 边框它类似于 Css Dropdown Menu - Hover disappear但我需要设计师的差距。提前致谢!

enter image description here

最佳答案

您正在寻找这样的东西吗?没有js的纯css

Demo Update

ul {
list-style:none;
}
ul > li {
display:block;
position:relative;
float:left;
}

ul > li > a {
display:inline-block;
padding:20px;
background:#eee;
border-bottom:1px solid #333;
color:#333;
}

ul>li ul {
opacity:0;
width:200px;
background:#333;
visibility:hidden;
position:absolute;
top:100%;
left:0;
transition: all .3s ease .6s;
margin:0;
padding:0;
}

ul>li:hover ul {
opacity:1;
visibility:visible;
transition: all .3s ease .1s;
}

ul>li li {
float:none;
}

ul>li ul a {
display:block;
border:none;
background:#333;
color:#eee;
}

关于jquery - 具有悬停效果的简单嵌套 ul li 菜单,但有关 margin-top 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29919966/

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