Как зделать появление div при навидении?

Question

[Kalwin]

Ребят, прошу помощи, так как в js не силён, а через css не сделать.
есть макет меню(jsfiddle) который хотелось бы оживить, что бы при наведении на кнопку навигации сначала выпадал лист с главными категориями, а при наведении на них выскакивала уже остальная информация других ссылок и т.п.

.main-menu { display: none; } /* display: none; */
.btn-menu:hover + .main-menu { display: block; }
.main-menu div .list-menu { position: relative; padding: 0; margin: 0; list-style-type: none; }
.main-menu div .list-menu::after { content: ''; position: absolute; left: 48%; top: -1.2rem; border: 10px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 10px; border-top: 10px solid rgb(248 249 250); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.main-menu div .list-menu li { border-left: 1px solid rgb(222 226 230); border-top: 1px solid rgb(222 226 230); border-right: 1px solid rgb(222 226 230); }
.main-menu div .list-menu li:last-child { border-bottom: 1px solid rgb(222 226 230); -webkit-border-bottom-right-radius: .25rem; -webkit-border-bottom-left-radius: .25rem; -moz-border-radius-bottomright: .25rem; -moz-border-radius-bottomleft: .25rem; border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem; }
.main-menu div .list-menu li a { width: 100%; display: block; padding: .2rem .5rem; color: rgb(0 0 0); text-transform: uppercase; text-decoration: none; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; }
.main-menu div .list-menu li:hover { border-right: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; }
.main-menu div .list-menu li a:hover { padding-left: 1rem; }
.main-menu div .content-menu { display: none; } /* display: none; */
.main-menu div .list-menu li:hover .content-menu { display: block; }

<div class="container">
  <div class="row">
  <div class="col-3 btn btn-primary btn-menu">Nanigation</div>
    <form class="d-flex col-6">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
    <button type="button" class="col-3 btn btn-danger">Button</button>
  </div>
</div>
<div class="container position-relative main-menu px-0">
  <div class="row position-absolute w-100 g-0">
    <nav class="col-3 list-menu bg-light">
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
      <li><a href="">Link 4</a></li>
    </nav>
    <div class="col-9 border border-start-0 rounded content-menu bg-light">
      <h3 class="h-100 text-center">title category 1</h3>
    </div>
    <div class="col-9 border border-start-0 rounded content-menu bg-light">
      <h3 class="h-100 text-center">title category 2</h3>
    </div>
  </div>
</div>
<div class="container">
</div>

Comments

[Froggyweb]

можно и css
https://www.google.com/search?q=multilevel+nav+css...

[Kalwin]

Froggyweb, можно, но мне те варианты не подходят.

[Froggyweb]

Kalwin UA, вряд ли. Расположение меню у тебя очень странное в DOM
Посмотри уроки про бургер меню. У тебя абсолютно тот же вариант, но вместо полосок надпись навигация :)

Answer 1

[Nashesolnce]

Воспользуйся секцией
modal, popover или tooltips
хорошо описанные в
https://bootswatch.com/cerulean/