無法處理下拉菜單中子類別的結論。只做了第二級(菜單 - >子菜單),但第三級和第四級立即出現。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。 –