Simple nested ul li menu with hover effect, but problem regarding margin-top
my js:
$("#navShop li").hover(function () {
$(this).find("ul.subCatMenu").stop(true, true).show();
},
function () {
$(this).find("ul.subCatMenu").stop(true, true).hide();
});
Nothing special about JS and my 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>
The point is, the designer needs a line when you hover over, so just
a:hover{ border-bottom: 1px solid green;}
But between the second level ul
and a
it has a few pixels. When I move the cursor to the second level ul, it disappears. When the mouse is on the border of a or on its edge. explain my bad image without photoshop: red = margin, blue = padding, green = border is something similar to Css Dropdown Menu - Hover disappears , but I need a space for the designer. Thanks in advance!
+3
source to share
1 answer
Are you looking for something like this? Pure css without js
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;
}
+1
source to share