<div data-collapse="medium" data-animation="default" data-duration="400" class="w-nav">
        <div class="w-container"><a href="#" class="w-nav-brand"></a>
            <nav role="navigation" class="w-nav-menu"><a href="#" class="w-nav-link">Home</a><a href="#" class="w-nav-link">About</a>
                <div data-delay="0" class="w-dropdown">
                    <div class="hide w-dropdown-toggle">
                        <div class="w-icon-dropdown-toggle"></div>
                        <div>Dropdown Hide Mobile</div>
                    </div>
                    <nav class="w-dropdown-list"><a href="#" class="w-dropdown-link">Link 1</a><a href="#" class="w-dropdown-link">Link 2</a><a href="#" class="w-dropdown-link">Link 3</a></nav>
                </div>
                <div data-delay="0" class="w-dropdown">
                    <div class="w-dropdown-toggle">
                        <div class="w-icon-dropdown-toggle"></div>
                        <div>Dropdown</div>
                    </div>
                    <nav class="w-dropdown-list"><a href="#" class="w-dropdown-link">Link 1</a><a href="#" class="w-dropdown-link">Link 2</a><a href="#" class="w-dropdown-link">Link 3</a></nav>
                </div>
            </nav>
            <div class="w-nav-button">
                <div class="w-icon-nav-menu"></div>
            </div>
        </div>
    </div>

/* Webflow default breakpoints */

@media screen and (max-width: 991px) {
  /* Your responsive CSS */
}
@media screen and (max-width: 767px) {
  /* Your responsive CSS */
}
@media screen and (max-width: 479px) {
  /* Your responsive CSS */
}

/* Hide dropdown with .hide class on tablet down */
@media screen and (max-width: 991px) {
    .w-nav[data-collapse="medium"] .hide.w-dropdown-toggle {
        display:none;
    }

   
}