HTML / CSS выпадающий в меню NavBar

Question

<nav>
                        <ul>
                            <li class="dropdown tt-megamenu-col-02 <?php echo ($page == "index" ? "selected": "")?>">
                                <a href="index.php">HOME</a>
                            </li>
                            <li class="dropdown megamenu <?php echo ($page == "categories" || $page == "listing" || $page == "product" ? "selected": "")?>">
                                <a href="categories.php">SHOP</a>
                            </li>
                            <li class="dropdown tt-megamenu-col-01 <?php echo ($page == "about" ? "selected": "")?>">
                                <a href="about.php">ABOUT</a>
                            </li>
                            <li class="dropdown tt-megamenu-col-01 <?php echo ($page == "contact" ? "selected": "")?>"><a href="contact.php">CONTACT</a></li>

                        </ul>
                    </nav>

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

Answer 1

Попробуйте, во фрагменте

nav{
 display:flex;
 justify-content: space-between;
 align-items: center;
 padding:0px 10px;
}
nav a{
  text-decoration: none;
}
.menu{
 display:flex;
 justify-content: space-between;
}
#menuBtn{
 padding:10px;
}
.hiddenlayer{
  background-color: rgba(100%,100%,100%,0.9);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
  position:absolute;
  max-height: 0vh;
  overflow: hidden;
  transition: 1s;
}
.hiddenlayer>div{
  padding:10px;
}
#menuBtn:hover .hiddenlayer{
  max-height: 100vh;
}

<nav>
<big>LOGO</big>
<div class="menu">
  <div id="menuBtn">ABOUT</div>
  <div id="menuBtn">CATEGORY
    <div class="hiddenlayer">
        <div>
            <a href="#">CATEGORY 1</a>
        </div>
        <div class="dropdown megamenu">
            <a href="#">CATEGORY 1</a>
        </div>
        <div class="dropdown tt-megamenu-col-01">
            <a href="#">CATEGORY 1</a>
        </div>
        <div class="dropdown tt-megamenu-col-01">
            <a href="#">CATEGORY 1</a>
        </div>

    </div>
  </div>
  <div id="menuBtn">CONTACT</div>
</div>
</nav>

Answer 2

Попробуйте:

<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

  <li class="dropdown right">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>