bootstrap navbar - show only submenu on mobile - twitter-bootstrap-3

Question

I have a standard bootstrap navbar, that collapse on mobile. Here below the code, for your reference:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu with dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu voice 1</li>
<li>Submenu voice 2</li>
<li>Submenu voice 3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I would like, after clicking on the hamburger menu on mobile, to get directly the 3 <li> "Submenu voice x" and hide the parent <li> (class="dropdown").
How can I achieve this result? Thank you

Answer 1

You can use CSS for this:
#media (max-width: 767px) {
.navbar-nav .dropdown-menu {
display: block;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-toggle {
display: none !important;
}
.navbar-inverse .navbar-nav .dropdown-menu > li > a {
color: #9d9d9d;
}
}
CODEPEN

Answer 2

I had to add the below to .navbar-nav .dropdown-menu in order to make it work.
opacity:1;
visibility: visible;

Answer 3

Try below code.
HTML:
<nav class="main-menu navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent1">
<ul class="navigation clearfix">
<li class="current dropdown"><a routerLink="/">Home</a>
</li>
<li class="dropdown">About
<ul class="dropdown-menu">
<li>Company Overview</li>
<li>Vision Mission</li>
<li>Ethics & Core Values</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
.dropdown:hover > .dropdown-menu{
display: block;
}