Вторичное раскрывающееся меню в раскрывающемся меню не отображается

Question

У меня возникают проблемы с отображением дополнительного раскрывающегося меню справа от одной из раскрывающихся ссылок, над которыми я наведите курсор, но она не отображается ..

Я разместил дополнительное раскрывающееся меню соответствующим образом, используя поля.. Если вы измените ширину класса .subDropdown на значение, например 100px, вы увидите, что раскрывающийся список находится там, где он должен быть ... поэтому я не уверен, почему он не меняется при кодированиив событии 'hover' ..

https://jsfiddle.net/yje82den/

Не вижу, что мне не хватает ..

HTML:

<div class="navbtn">
<p>MENU BUTTON</p>

<div class="dropdown">
    <div class="dropdownitem">Link 1</div>
    <div class="dropdownitem">Link 2</div>
    <div class="dropdownitem" id="sub">Link 3 &#8594;</div>
    <div class="subDropdown">
        <div class="dropdownitem">Link 4</div>
        <div class="dropdownitem">Link 5</div>
        <div class="dropdownitem">Link 6</div>
    </div>
</div>

CSS:

.navbtn {
background-color: #009337;
max-width: 250px;   
}

.dropdown {
height:0;
overflow: hidden;
transition: height 0.5s;
}

.dropdownitem {
background-color: #00bf48;
border-top: 1px solid rgba(0,0,0,0.4);
padding: 10px;  
transition: background-color 0.5s;
}
.dropdownitem:hover {background-color:#43e27f;}

.subDropdown .dropdownitem {
background-color: #23f171;
}

.subDropdown {
position: fixed;
margin: -39px 0 0 250px;
height: 120px;
width: 0;
overflow: hidden;
transition: width 0.5s;
}

.navbtn:hover .dropdown {height:115px;}
#sub:hover .subDropdown {width: 250px;}

Answer 1

Раскрывающийся список .subDropdown не является потомком #sub, поэтому селектор #sub:hover .subDropdown не будет работать.

Вместо этого вы можете использовать селектор брата (+), так как под раскрывающийся список помещается сразу после #sub div в DOM.

Кроме того, вы можете добавить .subDropdown:hover к тем же стилям, чтобы при наведении указателя мыши на дочерние ссылки,меню остается открытым.

#sub:hover + .subDropdown,
.subDropdown:hover {
  width: 250px;
}

Вот обновленная скрипка: https://jsfiddle.net/yje82den/2/