title: Remove drop down content when no data
body: <p>I have a drop down menu under a bell icon that displays notifications but when there is no data available for it, it displays this on click :</p>
  
  <p><a href="https://i.stack.imgur.com/z0e14.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z0e14.png" alt="drop"></a></p>
  
  <p>my haml :</p>
  
  <pre><code>%nav.navbar.navbar-default
          .container
              .navbar-brand= link_to "wat", root_path
              - if user_signed_in?
                  %ul.nav.navbar-nav.navbar-right
                      %li.nav-item.btn-group{"data-behavior"=&gt;"notifications"}
                          %a#dropdownMenu1.dropdown-toggle.nav-link{"aria-expanded" =&gt; "false", "aria-haspopup" =&gt; "true", "data-behavior" =&gt; "notifications-link", "data-toggle" =&gt; "dropdown", :type =&gt; "button"}
                              = fa_icon "bell"
  
                              %span.notifs{"data-behavior" =&gt; "unread-count"} 
                          .dropdown-menu{"aria-labelledby" =&gt; "dropdownMenu1", "data-behavior" =&gt; "notification-items"}
  </code></pre>
  
  <p>How to remove the little rectangle ?</p>