title: Boostrap BS3 navbar Clic Dropdown-Submenu
body: <p>I'm using <code>Bootstrap BS3</code> in order to build my <code>Django website</code>. I'm writing <code>dropdown-submenu</code> which works on <a href="http://www.bootply.com/nZaxpxfiXz#" rel="nofollow noreferrer">http://www.bootply.com/nZaxpxfiXz#</a></p>
  
  <p><a href="https://i.stack.imgur.com/85uTq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/85uTq.png" alt="enter image description here"></a></p>
  
  <p>But When I applied the same thing to my project, I get :</p>
  
  <p><a href="https://i.stack.imgur.com/hctZy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hctZy.png" alt="enter image description here"></a></p>
  
  <p>I don't have the little arrow beside dropdown-menu title. So I can't navigate or even display submenus like :</p>
  
  <ul>
  <li>Accueil Fiches Individuelles</li>
  <li>Création Fiches Individuelles</li>
  <li>...</li>
  </ul>
  
  <p>This is my script :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
      {% load staticfiles %}
      {% load user_tags %}
  
      &lt;title&gt; DatasystemsEC - Accueil &lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="base.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;   
      &lt;link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/&gt;
      &lt;/head&gt;
  
      &lt;!-- #################### --&gt;
      &lt;!-- Upper navigation bar --&gt;
      &lt;!-- #################### --&gt;
  
          &lt;nav class="navbar navbar-inverse"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="http://www.datasystems.fr/"&gt; DatasystemsEC &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Home tab --&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a href="{% url "accueil" %}"&gt; &lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt; Accueil &lt;/a&gt;&lt;/li&gt; 
  
                  &lt;!-- Resume Tab with acts --&gt;
  
                  {% if user.is_authenticated %}
                  &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Actes Etat Civil &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li class="dropdown dropdown-submenu"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                                  &lt;span class="glyphicon glyphicon-baby-formula"&gt;&lt;/span&gt; Fiches Individuelles &lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Accueil Fiches Individuelles&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Création Fiches Individuelles&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Consultation Fiches Individuelles&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Edition Fiches Individuelles&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Suppression Fiches Individuelles&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li class="dropdown dropdown-submenu"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 
                                  &lt;span class="glyphicon glyphicon-baby-formula"&gt;&lt;/span&gt; Actes de Naissance&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Accueil Actes de Naissance&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Création Actes de Naissance&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Consultation Actes de Naissance&lt;/a&gt;&lt;/li&gt;
  
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      {% endif %}
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          {% block content %}
          {% csrf_token %}
          {% endblock content %}
  &lt;/html&gt;
  </code></pre>
  
  <p>I have a CSS file too :</p>
  
  <pre><code>/* ###################################################### */
  /* CSS File about BirthCertificate application properties */
  /* ###################################################### */
  
  /* Define background color from upper navbar */
  .navbar-inverse {
      background-color: #0083A2;
      }
  
  /* DatasystemsEC tab */
  .navbar-inverse .container-fluid .navbar-header .navbar-brand {
      color : white;
      }
  
  /* Tab properties from navbar */
  .navbar .nav &gt; li &gt; a {
      color:  white;
      }
  
  .navbar .nav &gt; li &gt; a:hover {
      color:  #454545;
      }
  
  .active {
      background-color: #454545;
      }
  
  /* Titles properties */
  h1, h2, h4 {
      color: #0083A2;
      }
  
  /* Define button properties */
  .button {
  
      display: inline;
      margin-left: auto;
      margin-right: auto;
      border-radius: 8px;
      font-size: 16px;
      background-color: #e7e7e7;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;
      }
  
  /* Define form fields properties */
  .form-fields {
      border-radius: 8px;
      margin-right: auto;
      }
  
  .col-sm-6 {
      display:inline-block;
      margin-left : 10px;
      width: 30%;
      list-style: none;
      }
  
  .col-sm-8 {
      list-style: initial;
      }
  
  .col-sm-10 {
      display:inline-block;
      margin-left : 10px;
      width: 800%;
      list-style: none;
      }
  
  /* Hoover button properties */
  .button:hover {
      background-color: #0083A2;
      color: #454545;
      }
  
  /* Hoover color dropdown menu */
  .dropdown-menu&gt;li&gt;a:hover {
     color: #FFFFFF;
     text-decoration: none;
     background-color: #0083A2;
      }
  
  .logo {
      position : fixed ;
      top:0;
      left:100px;
  }
  
  @justify {
      text-align: justify;
  }
  
  .marginBottom-0 {margin-bottom:0;}
  
  .dropdown-submenu{position:relative;}
  .dropdown-submenu&gt;.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
  .dropdown-submenu&gt;a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
  .dropdown-submenu:hover&gt;a:after{border-left-color:#555;}
  .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left&gt;.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
  </code></pre>
  
  <p>Have you an idea ? I don't find a way to solve my problem</p>