Два отдельных независимых меню

Question

Пожалуйста, помогите разобраться, почему не работают два независимых навигационных блока. Нужно сохранить их независимость в любом случае, сервер формирует их контекстуально - иногда оба сразу, иногда - только первое, основное.

В приведенном примере второе меню вообще не работоспособно (не выпадает в виде списка). Все лишнее убрано: только минимальное количество строк. Цвета специально пестрые для наглядности (не обессудьте). Первое меню предполагается и графически оформлять иначе. Второе - более контексто-зависимое, хотелось бы менее броско. Но не суть. Вопрос: что не так в CSS? (Вообще, я не спец по CSS, основная моя нагрузка - .Net, уж простите)

li {
  float: left;
}

li.dropdown {
  display: inline-block;
}


/*<!-- ------------------ 1 ----------------------- -->*/

ul.navmain {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkorange;
}

li a,
.btndropmain {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .btndropmain {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}


/*<!-- ------------------ 2 ----------------------- -->*/

ul.subnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: gray;
}

li a,
.btnsubdrop {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
}

.subsubdropdown-content {
  display: none;
  position: absolute;
  background-color: #cab681;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.subdropdown-content a {
  color: white;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.subdropdown-content a:hover {
  background-color: #ffffff
}

li a:hover,
.subdropdown:hover .btnsubdrop {
  background-color: blue;
}

<ul class="navmain">
  <li><a href="#">Home</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="btndropmain">1</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
    </div>
  </li>
</ul>
<ul class="subnav">
  <li class="subdropdown">
    <a href="javascript:void(0)" class="btnsubdrop">Action</a>
    <div class="subdropdown-content">
      <a href="#" class="subdropdown">Create new...</a>
    </div>
  </li>
</ul>


<hr>
<p>...</p>

Answer 1

subdropdown:hover только меняет фон. нужно ещё по ховеру subsubdropdown-content display: block прописать

Answer 2

Вероятно, проблема в неверном имени класса. Ниже комментарием отметила место. Ну и как вам верно написали в соседнем ответе, нужно display: block прописывать при наведении.

li {
  float: left;
}

li.dropdown {
  display: inline-block;
}


/*<!-- ------------------ 1 ----------------------- -->*/

ul.navmain {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkorange;
}

li a,
.btndropmain {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .btndropmain {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}


/*<!-- ------------------ 2 ----------------------- -->*/

ul.subnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: gray;
}

li a,
.btnsubdrop {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 4px 8px;
  text-decoration: none;
}

.subsubdropdown-content,/*ЭТОГО КЛАССА НЕ СУЩЕСТВУЕТ*/
.subdropdown-content { /*есть только этот*/
  display: none;
  position: absolute;
  background-color: #cab681;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.subdropdown-content a {
  color: white;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.subdropdown-content a:hover {
  background-color: #ffffff
}

li a:hover,
.subdropdown:hover .btnsubdrop {
  background-color: blue;
}

.subdropdown:hover .subdropdown-content { /*добавлено появление при наведении*/
  display: block;
}

<ul class="navmain">
  <li><a href="#">Home</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="btndropmain">1</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
    </div>
  </li>
</ul>
<ul class="subnav">
  <li class="subdropdown">
    <a href="javascript:void(0)" class="btnsubdrop">Action</a>
    <div class="subdropdown-content">
      <a href="#" class="subdropdown">Create new...</a>
    </div>
  </li>
</ul>


<hr>
<p>...</p>

БЛОГ НА HUSL

Два отдельных независимых меню

Ответы (2 шт):