user889030 user889030 - 27 days ago 8
HTML Question

purecss drop down menu not working

am using trying to create vertical drop-down menu using purecss library but no success

purecss.io/menus/


my css code looks like

<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-has-children">
<a href="#" id="menuLink1" class="pure-menu-link">T-Shirts</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-rundhals-tx-2-1,-1-2-.html">Rundhals</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-v-neck-tx-3-1,-1-3-.html">V-Neck</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-longsleeve-tx-4-1,-1-4-.html">Longsleeve</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-tanktop-tx-124-1,-1-124-.html">Tanktop</a>
</li>
</ul>
</li>
</ul>
</div>


even i copy paste the sample code from their documentation and its not working too

jsBin

Answer

It's working fine just add css for custom-restricted-width because your pure-menu div content 100% width of the screen, so that you can not show the dropdown menu.

.custom-restricted-width{
    display:inline-block;
}
Comments