title: Display a menu into a colored stripe
body: <p>I have a problem when i try to insert my menu in a div tag. I want to display a dark blue stripe (called Navbar-primary in my example) and inside this stripe I want to display my menu. For the moment I have this result :</p>
  
  <p><a href="https://i.stack.imgur.com/Nvdii.png" rel="nofollow noreferrer">Menu out of the stripe</a></p>
  
  <p>This is the html of the stripe :</p>
  
  <pre><code>&lt;header class="main-header"&gt;
      &lt;div class="navbar-secundary"&gt;navbar-secundary
      &lt;/div&gt;
      &lt;div class="navbar-primary"&gt;navbar-primary
          &lt;app-navbar&gt;&lt;/app-navbar&gt;
      &lt;/div&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p>(in the app-navbar tag I have my menu)</p>
  
  <p>and this is the css of the stripe :</p>
  
  <pre><code>.main-header .navbar-secundary {
      margin-bottom: 1px;
  }
  
  .navbar-secundary {
      background-color: 
  #000f2f;
  color:
      #fff;
      font-family: DINNCondMedium,sans-serif;
      font-weight: 500;
  }
  
  header .navbar-secundary .wrapper {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
  }
  
  
  .main-header .nav {
      margin: 0;
      padding: 0;
      display: block;
      letter-spacing: -.31em;
      text-rendering: optimizeSpeed;
  }
  
  
  
  .main-header &gt; .navbar-primary {
      position: relative;
  }
  
  .main-header .navbar-primary, .main-header .navbar-secundary {
      background-color: 
  #000f2f;
  color:
      #fff;
      font-family: DINNCondMedium,sans-serif;
      font-weight: 500;
  }
  </code></pre>
  
  <p>and this is my app-navbar html :</p>
  
  <pre><code>&lt;nav class="menu"&gt;
      &lt;ul class="inline"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Acceuil&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Nous contacter&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Nos tarifs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;L'aquarium&lt;/a&gt;
              &lt;ul class="list"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ENTRÉE 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ENTRÉE 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ENTRÉE 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>With the app-navbar css :</p>
  
  <pre><code>nav.menu {
      font-family: verdana;
      font-size: 18px;
  }
  
  /*
   * on s'occupe ici des dimension du menu
   */
  nav.menu ul {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0;
      margin:0;
      list-style-type: none; /* pour enlever les asterix devant les menu pour de l'esthetique */
  }
  
  /*
   * ici on design les sous menu
   */
  nav.menu ul li {
      width: 250px; /* taille des case */
      box-sizing: border-box; /*  le padding et la bordure n'augmentent plus la largeur de l'element*/
      height: 60px;
      padding:20px 0px;
      background-color: #EEE; /* on met la couleur gris */
      text-align: center; /* on aligne le text */
      border: 1px solid black; /* on met des bordure noir */
      margin: 20px;
  }
  
  nav.menu ul.inline &gt; li {
      float: left;
      background-image: url(/assets/image/dolphin-logo.png); /*you might need to change the url*/
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: blue;
      /* border-bottom: none; */
  }
  
  nav.menu ul.list &gt; li {
      width: 251px;
      float: none;
      border: 1px solid black;
      border-bottom: none;
  }
  
  nav.menu ul.list &gt; li:last-child {
      border-bottom: 1px solid black; /* on met une bordure noir en bas de la derniere case de la sous list */ 
  }
  
  nav.menu ul ul {
      display: none; /* pour cacher le sous menu lorsque l'on est pas dessus */
      position: absolute;
      top: 60px;
      left: 0px;
  }
  
  
  /* on va specifier ce quil se passe lors du survol de la souris grace a :hover */
  nav.menu ul li:hover &gt; ul {
      display: block; /* permet a ce que le sous menu s'affiche en bloc quand on passe la souris dessus */
  }
  
  nav.menu ul li:hover {
      background-color: #EFAE00; /* met la couleur lors du survol */
  }
  
  hr {
      width: 100%;
      height: 2px;
      margin: 0;
      border: none;
  
      /* ligne de couleur degrader en violet et jaune */
      background: linear-gradient(90deg,
          purple 10%, yellow 20%, purple 30%,
  yellow 40%, purple 50%, yellow 60%,
  purple 70%, yellow 80%, purple 90%, yellow 100%);
  }
  </code></pre>
  
  <p>Can you help me please ?</p>