如何选择复杂情况多维下拉菜单

Question

您好，我需要创建一个多维下拉菜单。但我的悬停选择不起作用。我不知道如何使用从其他类 div 父级到其他类 div 父级的选择器。查看样式中的代码。欢迎使用 Javascript 解决方案

<style>
    body {
        margin: autp;
    }

    #container {
        display: table;
    }

    #lcontainer {
        padding: 0 10px 0 10px;
        display: table-cell;
    }

    #rcontainer {
        padding: 0 10px 0 10px;
        display: table-cell;
    }

    .rvcontainer {
        display: none;
    }

    .lvcontainer:hover #rcontainer>.rvcontainer {
        display: block;
    }
</style>

<div id="container">
    <div id="lcontainer">
        <div class="lvcontainer">
            Country
        </div>
        <div class="lvcontainer">
            Genre
        </div>
    </div>
    <div id="rcontainer">
        <div class="rvcontainer">
            Japan
            <br> Korea
            <br> American
            <br>
        </div>
        <div class="rvcontainer">
            Comedy
            <br> Mystery
            <br> Horror
            <br>
        </div>
    </div>
</div>

Javascript 解决方案，但是类不工作的问题。

<script>
    var lvcontainer = document.getElementsByClassName('lvcontainer');
    var rvcontainer = document.getElementsByClassName('rvcontainer');
    for(i=0; i<1; i++){
    lvcontainer[i].addEventListener("mouseover", function(){
        rvcontainer[i].style.display = "block":
    }, FALSE);
    }
    </script>

Answer 1

对我来说不是很清楚你的问题到底是什么。但是，要在多个级别上创建下拉菜单，您必须像这样使用：

在 html 中：

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a>
    <ul>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 2</a>
        <ul>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

而css可以是这样的：

li > ul {
  display: none;
}
li:hover > ul {
  display: block;
}
li a:hover {
  color: pink;
}
li ul li a:hover {
  color: green;
}
li ul li ul a:hover {
  color: yellow;
}

这种情况我选择改变颜色，当然你可以改变任何你想要的css属性。 可以看演示 here