ドロップダウンメニューを吹き出しのようにしたい

前提・実現したいこと

マウスホバー時に出てくるドロップダウンメニューを吹き出しのようにしたいです。
上に三角がありその下にメニューボックスが現れるようにどうにかできないものでしょうか？
Before、afterでつけようとしたのですが、メニューボックスの中に三角が入ってしまい・・・
どなたかおたすけください＞＜

該当のソースコード

<nav class="main-navi">
            <ul id="main-menu">
              <li><a href="#">メインメニュー１</a></li>
              <li><a href="#">メインメニュー１１１１１</a></li>
              <li><a href="#">メインメニュー１１１１１１１</a>
                <ul class="sub-menu triangle">
                  <li><a href="#">サブメニュー２２２２２２</a></li>
                  <li><a href="#">サブメニュー２２２２２２２２２２２２２２２</a></li>
                  <li><a href="#">サブメニュー２２２２２２２２２</a></li>
                </ul><!-- .sub-menu -->
              </li>
              <li><a href="#">メインメニュー１１１１１</a></li>
              <li><a href="#">メインメニュー１１１１</a></li>
              <li><a href="#">メインメニュー１</a></li>
              <li><a href="#">メインメニュー１１１１１１１１１</a></li>
            </ul>
          </nav><!-- /.main-navi -->

.main-navi{
  text-align: center;
}
.main-navi ul#main-menu li:nth-child(3){
  position: relative;
}
.main-navi>#main-menu li{
  display: inline-block;
  flex: auto;
  -webkit-flex: auto;
}
.main-navi ul#main-menu ul.sub-menu {
   background-color: #fff; /* サブメニュー全体の背景色 */
   border-width: 2px; /* サブメニュー全体の枠線の太さ */
   border-style: solid; /* サブメニュー全体の枠線の線種 */
   border-color: #72b44a; /* サブメニュー全体の枠線の色 */
   margin: 0px;
   padding: 0px;
   display: none;
   position: absolute;
   left: -30%;
   top: 50px;
 }
.main-navi ul#main-menu ul.sub-menu li{
   width: 250px; /* サブメニュー1項目の横幅 */
   height: 35px; /* サブメニュー1項目の高さ */
   border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */
   border-style: dotted; /* サブメニュー1項目の枠線の線種 */
   display: block;
}
.main-navi ul#main-menu ul.sub-menu li:last-child{
  border-style: none;
}
.main-navi ul#main-menu ul.sub-menu li a {
   line-height: 35px; /* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */
   text-align: center;  /* サブメニュー1項目の項目名の配置(左寄せ) */
   text-indent: 5px;  /* サブメニュー1項目の項目名前方の余白 */
}
.triangle:before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 26.0px 15px;
  border-color: transparent transparent #73b44a transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #73b44a #000000;
  _filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

$(function(){
      $("#main-menu li").hover(function(){
         $("ul",this).show();
      },
      function(){
         $("ul",this).hide();
      });
   });

問題点のスクリーンショットです。
背景の白と画像は大元のdivにbackgroundで指定しています！