Skip to main content

Cómo cambiar el tamaño a un submenú que usé con Bootstrap

estoy usando Bootstrap v4.6. Cómo puedo hacer para que mi submenu desplegable (está en un div) quede del mismo ancho que su div padre. Así es como queda y así es como necesito que quede. Intenté haciendo:

#dropMenuSm {
    width: 100vw;
  }

pero esto me coge el ancho del viewport y yo necesito que me quede con el ancho del div padre. Les agradezco su ayuda.

Full código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<nav class="navbar navbar-expand-lg navbar-light d-flex px-0 bg-dark">
  <a class="navbar-brand bg-dark text-white pl-2 mr-auto p-2" href="/"><img src="" alt=""/><span class="px-3">Something</span></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="ml-auto">
      <ul class="navbar-nav">
        <li class="nav-item dropdown align-self-center position-relative px-lg-3 d-none d-lg-block" id="appsDropdown">
          <a class="nav-link" href="/#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">APPS<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown align-self-center text-center position-relative d-lg-none d-xl-none" style="cursor: pointer;">
          <a class="nav-link dropdown-toggle" id="navbarDropMobile" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">APPS<span class="sr-only">(current)</span></a>
          <div class="dropdown-menu text-center border-0 bg-primary" id="dropMenuSm" aria-labelledby="navbarDropMobile">
            <a class="dropdown-item-text text-decoration-none text-dark display-4 font-weight-light itemAppsMobile" href="/#">APP1</a>
            <a class="dropdown-item-text text-decoration-none text-dark display-4 font-weight-light itemAppsMobile" href="/#">View All</a>
        </div>
        </li>
        <li class="nav-item align-self-center px-lg-3">
          <a class="nav-link" href="/">BLOG</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-success text-white m-2 my-2 px-lg-3" href="/#">TRY</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
  </body>
</html>