Ayuda con menu js

<div class="bbWrapper"><b>Tengo un menu que deberia desplegarse para abajo pero no se despliega.<br /> <br /> este es el html</b><br /> <br /> <div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code"> <div class="bbCodeBlock-title"> Insertar CODE, HTML o PHP: </div> <div class="bbCodeBlock-content" dir="ltr"> <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang=""><code>&lt;div class=&quot;mr-2 ml-2 flex-grow&quot;&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;md-select focus:outline-none md-select--populated&quot; tabindex=&quot;0&quot;&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;md-select-inner-wrap rounded cursor-pointer block&quot; style=&quot;min-width: 0px;&quot;&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;md-select__border&quot;&gt;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;flex-grow relative py-[0.3125rem]&quot;&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;mb-1 text-xs h-4&quot;&gt;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;absolute top-4 transition-label populated&quot;&gt;Capitulos &lt;!----&gt; &lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;placeholder-text with-label populated&quot; style=&quot;min-height: 1em;&quot;&gt; &lt;!----&gt; Capitulo 8&lt;/div&gt; &lt;/div&gt;&lt;svg data-v-58fcffdf=&quot;&quot; data-v-615991ff=&quot;&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; class=&quot;feather feather-chevron-down icon text-icon-contrast text-undefined chevron ml-1 flex-shrink-0 my-4&quot; viewBox=&quot;0 0 24 24&quot;&gt; &lt;path d=&quot;m6 9 6 6 6-6&quot;&gt;&lt;/path&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; class=&quot;fixed overflow-y-auto overscroll-contain z-10 bg-accent shadow rounded-b&quot; style=&quot;display: none;&quot;&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/10&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/9&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/8&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/7&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/6&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/5&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/4&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/3&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/2&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;div data-v-615991ff=&quot;&quot; href=&quot;http://localhost/dorama/joven-criada/1&quot; class=&quot;px-4 py-2 hover:bg-accent-darken active:bg-accent-darken cursor-pointer&quot; tabindex=&quot;-1&quot; role=&quot;option&quot;&gt; &lt;!----&gt; &#039;.$chapter-&amp;gt;chapter_number.&#039;&lt;/div&gt; &lt;/div&gt; &lt;!----&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div><br /> <br /> <b>Debería verse así pero actualmente no se despliega, apreciaría si me podrían ayudar con su JS o CSS para que pueda únicamente se desplegarse hacia abajo.</b><br /> <br /> <br /> <script class="js-extraPhrases" type="application/json"> { "lightbox_close": "Cerrar", "lightbox_next": "Siguiente", "lightbox_previous": "Anterior", "lightbox_error": "El contenido solicitado no puede cargarse. Por favor, inténtalo de nuevo más tarde.", "lightbox_start_slideshow": "Iniciar presentación de diapositivas", "lightbox_stop_slideshow": "Detener presentación de diapositivas", "lightbox_full_screen": "Pantalla completa", "lightbox_thumbnails": "Miniaturas", "lightbox_download": "Descargar", "lightbox_share": "Compartir", "lightbox_zoom": "Zoom", "lightbox_new_window": "Nueva ventana", "lightbox_toggle_sidebar": "Alternar barra lateral" } </script> <div class="bbImageWrapper js-lbImage" title="ccccc.webp" data-src="https://forobeta.com/attachments/ccccc-webp.981161/" data-lb-sidebar-href="" data-lb-caption-extra-html="" data-single-image="1"> <img src="https://forobeta.com/attachments/ccccc-webp.981161/" data-url="" class="bbImage" data-zoom-target="1" style="" alt="ccccc.webp" title="ccccc.webp" width="238" height="518" loading="lazy" /> </div></div>

<div class="bbWrapper"><a href="https://forobeta.com/members/1597/" class="username" data-xf-init="member-tooltip" data-user-id="1597" data-username="@YeltsinReyes">@YeltsinReyes</a> alguien?</div>

<div class="bbWrapper">Pasale tu código a chatgpt o al botbeta.</div>

<div class="bbWrapper">&lt;div data-v-615991ff=&quot;&quot; class=&quot;fixed overflow-y-auto overscroll-contain z-10 bg-accent shadow rounded-b&quot; style=&quot;display: none;&quot;&gt;<br /> <b>style=&quot;display: none;&quot;</b> haz algo para quitar ese atributo, por eso no se ve. Solo es eso,</div>

<div class="bbWrapper"><blockquote data-attributes="member: 199795" data-quote="m16u31" data-source="post: 8455770" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=8455770" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-8455770">m16u31 dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> &lt;div data-v-615991ff=&quot;&quot; class=&quot;fixed overflow-y-auto overscroll-contain z-10 bg-accent shadow rounded-b&quot; style=&quot;display: none;&quot;&gt;<br /> <b>style=&quot;display: none;&quot;</b> haz algo para quitar ese atributo, por eso no se ve. Solo es eso, </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote>Asi es html con el display none, tiene de seguro en el script que al hacerle click o al pasar el puntero (css hover) quite ese display y se despliegue. <br /> <br /> O lo copio asi con el style en inpeccionar sin tomar en cuenta que el script o css hover lo cambia</div>

<div class="bbWrapper"><blockquote data-attributes="member: 181554" data-quote="Edrien" data-source="post: 8455680" class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch"> <div class="bbCodeBlock-title"> <a href="/goto/post?id=8455680" class="bbCodeBlock-sourceJump" rel="nofollow" data-xf-click="attribution" data-content-selector="#post-8455680">Edrien dijo:</a> </div> <div class="bbCodeBlock-content"> <div class="bbCodeBlock-expandContent js-expandContent "> <a href="https://forobeta.com/members/1597/" class="username" data-xf-init="member-tooltip" data-user-id="1597" data-username="@YeltsinReyes">@YeltsinReyes</a> alguien? </div> <div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div> </div> </blockquote>esta online?</div>

<div class="bbWrapper">Con lo que pusiste y no se si le afecte en los demas css (class) si le pones el css original ... asi abre el submenu<br /> <br /> Al div oculto le quitas -&gt; style=&quot;display: none;&quot;<br /> Al div principal le agregas la class por ejemplo -&gt; dropdownxx<br /> Al div oculto le agregas la class -&gt; dropdown-contentxx<br /> <br /> .dropdownxx {<br /> display: block;<br /> position: relative;<br /> }<br /> .dropdown-contentxx {<br /> display: none;<br /> position: absolute;<br /> }<br /> .dropdownxx:hover .dropdown-contentxx {<br /> display: block;<br /> }<br /> <br /> <iframe data-s9e-mediaembed="codepen" allowfullscreen="" scrolling="no" src="https://codepen.io/Puko_0/embed/jOvQawM?height=400&amp;default-tab=html,result" style="height:400px;width:100%"></iframe></div>