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

Here is the code to make a menu consists of 3 sub menus.

#primary_nav_wrap
{
 margin-top:15px
}

#primary_nav_wrap ul
{
 list-style:none;
 position:relative;
 float:left;
 margin:0;
 padding:0
}

#primary_nav_wrap ul a
{
 display:block;
 color:#333;
 text-decoration:none;
 font-weight:700;
 font-size:12px;
 line-height:32px;
 padding:0 15px;
 font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
 position:relative;
 float:left;
 margin:0;
 padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
 background:#ddd
}

#primary_nav_wrap ul li:hover
{
 background:#f6f6f6
}

#primary_nav_wrap ul ul
{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#fff;
 padding:0
}

#primary_nav_wrap ul ul li
{
 float:none;
 width:200px
}

#primary_nav_wrap ul ul a
{
 line-height:120%;
 padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
 top:0;
 left:100%
}

#primary_nav_wrap ul li:hover > ul
{
 display:block
}

<h3>CSS Drop Down Menu with sub menus</h3>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</nav>

Answer 2

你可以试试这个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 class

这是示例代码。只需根据您的需要或设计对其进行编辑即可。

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

CSS菜单不显示子菜单

CSS Menu does not display the sub-menus

html

css

haml