В настоящее время у меня есть многоуровневое раскрывающееся меню, которое содержит до трех списков. Я пытаюсь, чтобы все списки отображались автоматически при наведении. Это связано с тем, что я намерен создать ссылку href, сейчас ссылка работает только в третьем раскрывающемся списке, поскольку щелчок по другим кнопкам используется для отображения следующего раскрывающегося списка.
Я пытался добавить: hover in css раскрывающегося меню и выпадающего меню классов с "display: block;" но это не работает, и списки по-прежнему отображаются только при нажатии.
https://jsfiddle.net/nmv2d41w/1/
УМЕНЬШЕНИЕ:
<div class="dropdown p-left-15">
<button class="filter-btn filter-btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filter Coupons</button>
<!--Category 1-->
<ul class="dropdown-menu filter-dropdown">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-1</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-1</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li><a href=""></a>C3-1</li>
<li><a href=""></a>C3-2</li>
<li><a href=""></a>C3-3</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-2</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-a</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li><a href=""></a>C3-a</li>
<li><a href=""></a>C3-b</li>
<li><a href=""></a>C3-c</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover {
position: relative;
display: block;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.filter-btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.filter-btn.focus, .filter-btn:focus, .filter-btn:hover {
color: #333;
text-decoration: none;
}
.filter-btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.filter-btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}
.filter-dropdown li {
padding: 0px 8px;
font-size: 14px;
}
.filter-dropdown li:hover {
background-color: #e6e6e6;
}
.filter-dropdown li a {
color: black;
text-decoration: none;
}