javascript - 子菜单中的引导程序冲突

Question

有几个子菜单，然后当您转到第一个（并通过它）时，会出现与第二个下拉子菜单的冲突。如何解决这个问题？

这段代码我是复制的，不明白它是如何工作的

错误：

`then when you go to the first (and go through it), a conflict with the second dropdown submenu`

body {
    font-size:14px;
    padding: 15px 20px;
}

.dropdown-menu .dropdown-menu {
    top: auto;
    left: 100%;
    transform: translateY(-2rem);
}
.dropdown-item + .dropdown-menu {
    display: block;
    opacity: 0;
}
.dropdown-item.submenu::after {
    content: '▸';
    margin-left: 0.5rem;
}
.dropdown-item:hover + .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1;
    transition: opacity .3s .1s;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">1-й уровень</a>
        <a class="dropdown-item submenu" href="#">1-й уровень</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">2-й уровень</a>
            <a class="dropdown-item submenu" href="#">2-й уровень</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">3-й уровень</a>
                <a class="dropdown-item" href="#">3-й уровень</a>
            </div>
        </div>
    <a class="dropdown-item submenu" href="#">1-й уровень</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">2-й уровень</a>
            <a class="dropdown-item submenu" href="#">2-й уровень</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">3-й уровень</a>
                <a class="dropdown-item" href="#">3-й уровень</a>
            </div>
        </div>
    </div>
</div>

kjjjljlsjlfsflsfjfsfs

标签： javascripthtmlbootstrap-4dropdown