2017-03-16 211 views
0

无法处理下拉菜单中子类别的结论。只做了第二级(菜单 - >子菜单),但第三级和第四级立即出现。CSS菜单不显示子菜单

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

当悬停在1类别我从所有其他类别都有。但应交替:在类制成1只有类别 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由第2类,但不显示在3或4菜单级别。

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

+0

尽量提供编译的HTML。 –

回答

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

如果我使用。菜单UL李:悬停> .submenu这是正确生成的,但 不显示在3或4菜单级别。

,将工作,只需添加.submenu类您.submenu2.submenu3

下面的示例代码。只需编辑它以适应您的需求或设计。如果你能

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

1

这里是使菜单的代码由3个子菜单组成。

#primary_nav_wrap 
 
{ 
 
\t margin-top:15px 
 
} 
 

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

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

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

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

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

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

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

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

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

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
\t 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>