悬停id div不工作css

Question

我想创建多下拉菜单。所以我尝试首先为菜单布局和子菜单创建布局。首先它没有悬停工作。它显示左右布局，颜色为灰色和紫色。但是当我试图悬停时它没有显示出来。

＆＃13;

＆＃13;

body {
  margin: auto;
}

.menu {
  padding: 10px 10px 0 10px;
  height: 35px;
  background-color: black;
  float: left;
  color: white;
  line-height: 35px;
}

.sub-menu {
  min-width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;
  z-index: 1;
}

#l-sub-menu {
  float: left;
  min-width: 100px;
  height: 100px;
  background-color: gray;
}

#r-sub-menu {
  float: right;
  width: 100px;
  height: 100px;
  background-color: purple;
  display: none;
}

#l-sub-menu:hover #r-sub-menu {
  display: inline;
}

＆＃13;

<div class="menu">a123465</div>
<div class="menu">
  b123456
  <div class="sub-menu">
    <div id="l-sub-menu">
    </div>
    <div id="r-sub-menu">
    </div>
  </div>
</div>
<div class="menu">c12456</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您使用了错误的选择器......您必须使用adjacent sibling combinator (+)来获得结果。

#l-sub-menu:hover #r-sub-menu ...它会在#r-sub-menu

中选择#l-sub-menu

#l-sub-menu:hover + #r-sub-menu ...它会选择#r-sub-menu

旁边的#l-sub-menu

Stack Snippet

body {
  margin: auto;
}

.menu {
  padding: 10px 10px 0 10px;
  height: 35px;
  background-color: black;
  float: left;
  color: white;
  line-height: 35px;
}

.sub-menu {
  min-width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;
  z-index: 1;
}

#l-sub-menu {
  float: left;
  min-width: 100px;
  height: 100px;
  background-color: gray;
}

#r-sub-menu {
  float: right;
  width: 100px;
  height: 100px;
  background-color: purple;
  display: none;
}

#l-sub-menu:hover+#r-sub-menu {
  display: inline;
}

<div class="menu">a123465</div>
<div class="menu">
  b123456
  <div class="sub-menu">
    <div id="l-sub-menu">
    </div>
    <div id="r-sub-menu">
    </div>
  </div>
</div>
<div class="menu">c12456</div>

Answer 2

#l-sub-menu #r-sub-menu {表示

<div id="l-sub-menu">
    <div id="r-sub-menu"> </div><-------------Selected
</div>

#l-sub-menu + #r-sub-menu {表示

<div id="l-sub-menu"></div>
<div id="r-sub-menu"></div><-----------------Selected

所以你必须使用它：

#l-sub-menu:hover + #r-sub-menu {

body {
margin: auto;
}

.menu {
padding: 10px 10px 0 10px;
height: 35px;
background-color: black;
float: left;
color: white;
line-height: 35px;
}

.sub-menu {
min-width: 200px;
height: 100px;
background-color: green;
position: absolute;
z-index: 1;
}

#l-sub-menu {
float: left;
min-width: 100px;
height: 100px;
background-color: gray;
}

#r-sub-menu {
float: right;
width: 100px;
height: 100px;
background-color: purple;
display: none;
}

#l-sub-menu:hover + #r-sub-menu {
display: inline;
}

<div class="menu">a123465</div>
<div class="menu">
b123456
<div class="sub-menu">
<div id="l-sub-menu">
</div>
<div id="r-sub-menu">
</div>
</div>
</div>
<div class="menu">c12456</div>

Answer 3

试试这个：

.menu:hover .sub-menu {
    display: block;
}

.sub-menu {
min-width: 200px;
height: 100px;
background-color: green;
position: absolute;
z-index: 1;
display: none;
}

将“display：none”属性添加到.sub-menu并在.menu上使用悬停选择器。