无法处理下拉菜单中子类别的结论。只做了第二级(菜单 - >子菜单),但第三级和第四级立即出现。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
?
尽量提供编译的HTML。 –