html - CSS 菜单不显示子菜单

Question

无法处理下拉菜单中子类的归纳。只做了第二层(菜单 -> 子菜单)，但第三层和第四层立即出现。

我有:类别 1 -> 类别 2 -> 类别 3 -> 类别 4

当您将鼠标悬停在类别 1 上时，我有来自所有其他类别的内容。但应该交替:在类别 1 中制造的仅是类别 2 制造到类别 2 中仅类别 3

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: white;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
}
.menu .submenu {
  display: none;
}

.menu ul li {
  padding: 3px 0 3px 25px;
  position: relative;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover a {
  color: white;
}
.menu ul li a {
  color: #000;
  display: block;
  padding-right: 5px;
}
.menu ul li a:hover, .menu ul li a:active {
  color: white;
}
.menu ul li:hover .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 230px;
  width: 250px;
  top: 0;
  z-index: 99;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}

.submenu ul li:hover .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 230px;
  width: 250px;
  top: 0;
  z-index: 99;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}

.menu ul li:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 15px solid white;
  border-top: 30px solid transparent;
  width: 0;
}

.menu
    %ul     
      - ProductCategory.where(name: 'Общий каталог').first.children.active.sort_by(&:name).each do |pc|
        = link_to "/catalogs/#{pc.to_param}.html" do
          %li
            = pc.name
            - children = pc.children.active.sort_by(&:name)
            - if children.present?
              .submenu
                %ul
                  - children.sort_by(&:name).each do |child|
                    = link_to "/catalogs/#{child.to_param}.html" do
                      %li= child.name
                      - children_2 = child.children.active.sort_by(&:name)
                      - if children_2.present?
                        .submenu_2
                          %ul
                            - children_2.sort_by(&:name).each do |child_2|
                              = link_to "/catalogs/#{child_2.to_param}.html" do
                                %li= child_2.name
                                - children_3 = child_2.children.active.sort_by(&:name)
                                - if children_3.present?
                                  .submenu_3
                                    %ul
                                      - children_3.sort_by(&:name).each do |child_3|
                                        = link_to "/catalogs/#{child_3.to_param}.html" do
                                          %li= child_3.name

如果我使用正确生成的 .menu ul li:hover > .submenu，但未显示在 3 或 4 级菜单中。

请帮助正确组织 haml 和 css 中的代码。如何组织.submenu_2和.submenu_3？

Answer 1

你可以试试这个css，我稍微改了一下:

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  display: block;
  background: #fff;
}

.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu ul li{
  display: block;
  border-bottom: #ccc 1px solid;
  position: relative;
}
.menu ul li a{
  display: block;
  color: #000;
  padding: 5px;
}

.menu ul li.active > a,
.menu ul li a:hover{
  text-decoration: none;
  color: #fff;
  background: #ccc;
}


.menu ul li .submenu{
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
}

.menu ul li:hover > .submenu{
  display: block;
}

If I use .menu ul li:hover > .submenu that is generated correctly, but not displayed in the 3 or 4 menu levels.

这会起作用，只需在 .submenu2 或 .submenu3 上添加 .submenu 类即可

这是示例代码。只需对其进行编辑以满足您的需求或设计。

html,*{
margin: 0;
padding: 0;
font-size: 16px;
}

body{
background: #eee;
}
a{
text-decoration: none;
}
.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  display: block;
  background: #fff;
}

.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu ul li{
  display: block;
  border-bottom: #ccc 1px solid;
  position: relative;
}
.menu ul li a{
  display: block;
  color: #000;
  padding: 5px;
}

.menu ul li.active > a,
.menu ul li a:hover{
  text-decoration: none;
  color: #fff;
  background: #ccc;
}


.menu ul li .submenu{
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
}

.menu ul li:hover > .submenu{
  display: block;
}

<div class="menu">
      <ul>
        <li><a href="#">Sample</a></li>
        <li class="active"><a href="">Sample</a>
          <ul class="submenu submenu1">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li class="active"><a href="">Sub</a>
              <ul class="submenu submenu2">
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li class="active"><a href="">Sub</a>
                  <ul class="submenu submenu3">
                    <li><a href="#">Sub</a></li>
                    <li><a href="#">Sub</a></li>
                    <li><a href="#">Sub</a></li>
                    <li><a href="#">Sub</a></li>
                    <li class="active"><a href="">Sub</a></li>
                  </ul><!--// Inner Child 3 -->
                </li>
                <li><a href="#">Sub</a></li>
              </ul><!--// Inner Child 2 -->
            </li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
          </ul><!--// Inner Child 1 -->
        </li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Sample</a></li>
      </ul>
    </div><!--// end .menu -->