当我悬停鼠标时，我拼命地试图让子菜单出现在下面的菜单项下。 当使用 css 将菜单项悬停时，我创建了颜色变化和下划线，但不知道如何使子菜单出现在菜单项下。我不知道与 jquery 相关的知识，所以我在 google 上搜索了一些 jquery 效果，但也没有用。 有没有其他方法可以在不使用 jquery 的情况下让它出现？
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style><body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
<a href="#">HTML Introduction</a>
</li>
<li>
<a href="#">Reference Introduction</a>
</li>
<li>
<a href="#">Examples</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>最佳答案
您不需要 JQuery 即可在悬停时显示子菜单。你可以用 CSS 做到这一点。
.menu-item:hover .sub-menu {display: block;}
如果有多个子菜单，则为它们使用 id 或不同的类名。这样就可以在每个菜单下显示相应的子菜单。
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.menu-item:hover .sub-menu {display: block;}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style><body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
<a href="#">HTML Introduction</a>
</li>
<li>
<a href="#">Reference Introduction</a>
</li>
<li>
<a href="#">Examples</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>使用 JQuery，您可以模拟如下:
$(".menu-item").on("mouseover", function(){ //This will display the submenu on mouse hover.
$(".sub-menu").show();
});
$(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item.
$(".sub-menu").hide();
});.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
<a href="#">HTML Introduction</a>
</li>
<li>
<a href="#">Reference Introduction</a>
</li>
<li>
<a href="#">Examples</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>您可以使用 mouseover 和 mouseout或 mouseleave jQuery 事件。
关于javascript - 如何使用 jquery 显示子菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52288229/