JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-pills nav-stacked" id="pills-first">
    <li><a href="#"><span class="glyphicon glyphicon-glass"></span>  <span class="hidden-xs">Glas</span></a>

    </li>
    <li class="clearfix"> <a class="hidden-xs" href="#" data-target="#submenu1 "><span class="glyphicon glyphicon-music"></span> Music</a>
        <div class="dropdown"> <a href="#" class="visible-xs dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="glyphicon glyphicon-music"></span>
  </a> 
            <ul id="submenu1" class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#"><span class="glyphicon glyphicon-volume-off"></span> <span class="hidden-xs">Volume off</span></a>

                </li>
                <li><a href="#"><span class="glyphicon glyphicon-volume-down"></span> <span class="hidden-xs">Volume down</span></a>

                </li>
                <li><a href="#"><span class="glyphicon glyphicon-volume-up"></span> <span class="hidden-xs">Volume up</span></a>

                </li>
            </ul>
        </div>
    </li>
    <li><a href="#"><span class="glyphicon glyphicon-search"></span> <span class="hidden-xs">Search</span></a>

    </li>
</ul>

CSS

@media(max-width:767px) {
    li a[data-target="#submenu1"], #submenu1 {
        float:left;
    }
    #submenu1 {
        padding-left: 0;
        margin-left: -5px;
        list-style: none
    }
    #submenu1>li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px
    }
    .dropdown {
        display:inline-block;
    }
    #submenu1 {
        left:100%;
        top:0;
        width:250px;
        border:0;
        box-shadow:none;
        margin:0;
    }
}
@media(min-width:7678px) {
    .dropdown-menu {
        position:relative;
        display:block;
        float:none;
    }
}