我有这样的菜单结构:
<ul class"menu">
<li>
<a>item1</a>
<ul>
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="sub-ul-2">
<li><a>subitem5</a></li>
<li><a>subitem6</a></li>
<li><a>subitem7</a></li>
<li><a>subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我的要求是,当我将鼠标悬停在item1上时, subitem1,subitem2,subitem3,subitem4只需要显示,而subitem5 - 8则无需显示.
当我将鼠标悬停在item2上时,只需要显示subitem5 - 8.我怎样才能通过使用css实现这一目标？
我试过了:
ul.menu ul{
display: none;
}
ul.menu li:hover:first-child ul {
display:block;
}
我想在我的项目中实现以下小下拉菜单。
我的代码有什么本质上的错误吗？我尝试:hover通过 CSS 进行伪操作，但没有成功。JS这个东西有更好的方法吗？
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.querySelector('.dropdown-content').style.visibility = 'visible'
})
document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
document.querySelector('.dropdown-content').style.visibility = 'hidden'
}).dropdown {
display: flex;
align-items: flex-start;
}
.dropbtn {
background-color: darkslategray;
color: white;
padding: 6px 10px 6px;
font-size: 18px;
border: none;
cursor: pointer;
}
.dropdown-content {
background-color: darkslategray;
display: inline-grid;
visibility: hidden;
padding: 6px 10px 6px;
}
img {
margin: 3px;
height: 40px;
width: 120px;
border: 1px solid gray;
}<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
<img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""> …