Pull-down menu like Twitter Bootstrap - html

Question

I'm trying to make a menu for smartphones & tablets, but when I create it, it always overflows the content of my website.
The effect I want to achieve is the same as the Twitter Bootstrap website — When you open it with smartphones, you can press the button and the menu rolls down and pulls the content of the website.
Here is my code:
<div class="dropdown">
<button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button">
<span class="glyphicon glyphicon-collapse-down">
</span>
</button>
<div class="col-xs-12 dropdown-menu navbar-inverse" role="menu">
<a class ="divider" href="#">Accueil</a><br />
<a class ="divider" href="#">Centres d'Interets</a><br />
<a class ="divider" href="#">CV</a><br />
<a class ="divider" href="#">Contact</a><br />
</div>
</div>

Answer 1

You can use the example from the documentation as a start:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
...
</div>
</nav>
You can find it here.

Answer 2

Try the below code. Courtesy: http://bootswatch.com Adjust the menu according to your requirements
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
In the above code,
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Gives the desired effect when the window size changes in browser or on small screens (Mobiles and tabs).