下面有两段代码。这些代码用于下拉菜单。这两个代码几乎相同，但略有不同。我已经为主菜单创建了一个主列表项并为其指定了类。然后我创建了一个子菜单并给它类菜单。主标题被赋予类标题，并且在每个元素中都有元素。 当我在( anchor 元素)元素上应用“:悬停”并结合子菜单(下拉元素)时，代码不起作用。如果我在类标题(元素类)上应用“:悬停”，则下拉列表有效。 我正在共享代码以澄清和更具体。 以下代码适用于下拉菜单，并且悬停在标题类上。我已经在 css 的代码中进行了注释，以阐明我指的是哪部分代码。
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
display: block;
}<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading"><a href="#">Home</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">About</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Services</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Products</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Contact</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>现在我要发布不适用于下拉菜单的代码 在此元素与悬停以及子菜单类一起应用。
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover on a and submenu element doesnot works to make the element display as block*/
.heading a:hover .submenu{
display: block;
}<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading"><a href="#">Home</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">About</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Services</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Products</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Contact</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>所以我的问题是为什么代码适用于第一个代码而不适用于第二个代码。第二个代码悬停在元素上，而第一个代码悬停在主菜单的元素类上。
最佳答案
.heading a:hover .submenu ^
你有一个后代组合器。
<li class="heading"><a href="#">Home</a> <ul class="submenu">
这里的 .submenu 是 a 元素的 sibling，而不是后代。
您需要 sibling combinators 之一
关于html - 下拉式菜单;悬停 css 不适用于兄弟成员，但适用于后代成员，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54570595/