text: Q:
  
  how do I add a block beneath navbar-item in css
  
  I want to have a little block beneath the active page (and hover), in the navbar ofcourse. It should look like this:
  
  This is the code that I have so far. I think that the border-bottom needs to be very small, with a big thickness.
  .navbar .navbar-nav > li > a:hover {
  color:#008080;
  background:rgba(255,255,255, 0.0);
  border-bottom: 5px solid rgb(255, 128, 0);
  
  }
  I hope someone can help with this.
  
  A:
  
  So the best way I can see would be to make a div within the navbar li
  Something like:
  
  <div class="navbar">
  <li>Home
    <div class="square"></div>
    </li>
  
  And then give that div the styles of:
  
  .square {
        display:none;
        width:50%;
        margin:0 auto;
        background: orange;
        height:20px;
  
        }
      .square:hover {
        display:block;
        }
  
  That should make it appear when you hover over the square itself.
  You might have to use a javascript mouseover events if you want to make it appear when you hover over the whole li tag
  Does that help at all?
  
  