CSS Menu does not display the sub-menus

Can't deal with the conclusion of the subcategories in the drop down menu. only made the second level (menu -> submenu), but the third and fourth levels appear immediately.

I have: category 1 -> category 2 -> category 3 -> category 4

When you hover on category 1 I have from all other categories. but should alternately: made in category 1 were only category 2 made to category 2 only category 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

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

Please help in proper organization of code in haml and css. How to organize .submenu_2 and .submenu_3?

Solution

You can try this css, I've changed it a bit:

.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.

That will work, just add .submenu class on your .submenu2 or .submenu3

Here's the sample code. Just edit it to suit your needs or design.

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 -->