CSS菜单不显示子菜单

Question

无法在下拉菜单中处理子类别的结论。只进行了第二级（菜单 - ＆gt;子菜单），但第三级和第四级立即出现。

我有：类别1 - ＆gt; 类别2 - ＆gt; 类别3 - ＆gt; 类别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

  

以下是使菜单包含3个子菜单的代码。

#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;
}

  

如果我使用.menu ul li：hover＆gt; .submenu正确生成，但是   不显示在3或4菜单级别中。

这样可行，只需在.submenu或.submenu2

上添加.submenu3课程

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;