Hacer menú con triángulo hacia arriba CSS HTML

Cuando Tenemos un menu desplegable y queremos que aparezca un triangulo en la parte de arriba hacemos lo siguiente:


CODIGO HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav>
  <ul class"menu">
    <li><a href="#">Menu 1</a></li>
    <li id="li-submenu">
      <a href="#">Menu 2</a>
      <div id="submenu" style="display: none;">
        <div id="triangulito"></div>
        <ul>
          <li><a href="#">Submenu 1</a></li>
           <li><a href="#">Submenu 2</a></li>
          <li><a href="#">Submenu 3</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

CODIGO CSS:

/*Para despleglar menu horizontal */
nav ul{
    list-style: none;
    display: block;
    
}
nav ul li{
    float: left;
    margin-right: 0.5em;
}

/*Para  el submenu */
#submenu {
    position: absolute;
    z-index: 1;
}

#submenu ul {
    padding: 15px 20px 5px 15px;
    background: #333;
    border-radius: 3px;
    margin-top: 0.5em;
}

#submenu ul li {
    float:none;
    font-size: 1em;
    text-align: left;
    list-style-type: none;
    margin: 0 0 7px;
    cursor: pointer;
    display: list-item;
}

#submenu ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
}

/*PARA EL TRIANGULO*/
#triangulito {
    margin-left: 10px;
    margin-bottom: -8px;
    width: 0px; 
    height: 0px; 
    border-left:  10px solid transparent;
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #333;
}

CODIGO JAVASCRIPT CON JQUERY:

$(document).ready(function(){
    //Para despleglar al pasar mouse por encima
    $("#li-submenu").on( "mouseenter", function() {
      $("#submenu").css( "display", "block" );
    });
    $("#li-submenu").on( "mouseleave", function() {
      $("#submenu").css( "display", "none" );
    });
})

CLIC PARA VER EL DEMO: