How Create a Down Triangle Like Arrow After Divs In Hover
<p>i wrote blew menu. and now i want to create arrow button when i hover in each li.but the code does not work correctly. the css codes does not work coorectly and the arrow not shows in the bottom of div that i hovered...</p>

<p>here is my snippet :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* body layout */
body {
 background:#1b1c20;
}

/* flat mega menu layout start */
.Flat_mega_menu ul,
.Flat_mega_menu li,
.Flat_mega_menu a,
.Flat_mega_menu p,
.Flat_mega_menu i {
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
 display: block;
}

/* mega menu layout */
.Flat_mega_menu {
 font-family: Nunito;  /* google webfont nunito */
 min-height: 60px;
 width: 100%;
 min-width: 240px;
 max-width: 1280px;
 position: relative;
 z-index: 999;
 background: #613570;
}

/* menu unorderlist layout */
.Flat_mega_menu &gt; ul {
 width: 100%;
 height: 60px;
}

/* menu list items layout */
.Flat_mega_menu &gt; ul &gt; li {
 float: right;
 height: 60px;
 width: 10%;
 border-left: 1px solid #542961;
 white-space: nowrap;
}

/* menu a tag + user_login + search_bar hover effect */
.Flat_mega_menu &gt; ul &gt; li:hover a,
.Flat_mega_menu ul .user_login:hover .fa.fa-user,
.Flat_mega_menu ul .search_bar:hover .fa.fa-search {
 color: #613570;
 transition: all 0.2s linear 0s;
 -moz-transition: all 0.2s linear 0s;
 -webkit-transition: all 0.2s linear 0s;
 -ms-transition: all 0.2s linear 0s;
 -o-transition: all 0.2s linear 0s;
 
}

/* menu a tag layout */
.Flat_mega_menu ul li a {
 color: #FFFFFF;
 text-align: center;
 line-height: 60px;
 font-size: 16px;
 float: left;
 width: 100%;
}



/* submenu display none */
.Flat_mega_menu ul li .submenu {
 display: none
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
 display: none;
 position: absolute;
 left: 0px;
 top: 60px;
 width: 100%;
 min-height:35px;
 background: #FFFFFF;
 border-bottom: 5px solid #613570;
}

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
 float: right;
 width: 10%;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
 color: #555658;
 text-align: left;
 white-space: normal;
 line-height: 40px;
 margin-bottom: 1px;
 font-size: 14px;
}

/* submenu with four column a tag hover effct */
.Flat_mega_menu ul li .submenu.four_col li:hover a {
 text-indent: 5px;
 color: #000000
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
 font-size: large;
 margin: 2%;
 font-weight: bold;
}


/* mouse hover display submenus */
.Flat_mega_menu ul li:hover .submenu.one_col,
.Flat_mega_menu ul li:hover .submenu.two_col,
.Flat_mega_menu ul .search_bar:hover ul,
.Flat_mega_menu ul .user_login:hover ul,
.Flat_mega_menu ul .social_bar:hover ul,
.Flat_mega_menu ul li:hover .submenu.img_container,
.Flat_mega_menu ul li:hover .submenu.four_col {
 display: block;
 
 /* animation */
 animation: display_submenus 0.2s linear 0s 1 forwards;
 -webkit-animation: display_submenus 0.2s linear 0s 1 forwards;
 -moz-animation: display_submenus 0.2s linear 0s 1 forwards;
 -ms-animation: display_submenus 0.2s linear 0s 1 forwards;
 -o-animation: display_submenus 0.2s linear 0s 1 forwards;
}

/* second level submenu hover effect */
.Flat_mega_menu ul li .submenu.one_col li:hover &gt; .submenu.one_col {
 display: block;
 
 /* animation */
 animation: display_submenus_second 0.2s linear 0s 1 forwards;
 -webkit-animation: display_submenus_second 0.2s linear 0s 1 forwards;
 -moz-animation: display_submenus_second 0.2s linear 0s 1 forwards;
 -ms-animation: display_submenus_second 0.2s linear 0s 1 forwards;
 -o-animation: display_submenus_second 0.2s linear 0s 1 forwards;
}

/* checkbox button layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
 display:none;
}


/* default animation keyframes */
@keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for chrome and safari */
@-webkit-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for firefox */
@-moz-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for internet explorer 10+ */
@-ms-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for opera */
@-o-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* second level submenus default animation */
@keyframes display_submenus_second {
 0% {
opacity:0
}
 100% {
opacity:1
}
}


@media screen and (max-width:768px){
/* menu unorderlist layout */
.Flat_mega_menu &gt; ul {
 height: auto;
 position:relative;
}

/* menu list items layout */
.Flat_mega_menu &gt; ul &gt; li {
 float: none;
 height: 60px;
 width: 100%;
 border-left: none;
 border-bottom: 1px solid #542961;
 position:relative;
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
 display: none;
 z-index:999;
 left: 0px;
 top: 60px;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
 width:auto;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title{
 margin-bottom: 16px;
}
/* mobile button layout */
.Flat_mega_menu .mobile_button{
 opacity:0;
}

/* mobile buton + fontawesome icon layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
 display: block;
 position: absolute;
 left: 0px;
 z-index: 999;
 height: 60px;
 width: 9%;
 cursor:pointer;
 min-width: 60px;
}

/* fontawesome icon layout */
.Flat_mega_menu .fa.fa-bars:before{
 color: #FFFFFF;
 font-size: 40px; 
 top: 10px;
 position: relative;
 left: 15px;
}
}

@media screen and (max-width:592px){

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
 float: left;
 width: 42%;
 margin-right: 1%;
 margin-left: 5%;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
 margin: 2% 1% 2% 5%;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title:nth-child(3),
.Flat_mega_menu ul li .submenu.four_col .title:nth-child(4) {
 display:none;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title{
 margin-bottom: 26px;
}
}
.hoverdown:hover {
    content:'';
    margin-left: 0px;
    width: 0;
    height: 0;
    border-top: solid 20px #e15915;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;div class="Flat_mega_menu"&gt;

&lt;i class="fa fa-bars"&gt;&lt;/i&gt;   &lt;!-- fontawesome mobile button icon --&gt;
&lt;input class="mobile_button" type="checkbox"&gt;  

 &lt;ul&gt;

     &lt;li class="hoverdown"&gt;&lt;a href="#"&gt;More&lt;/a&gt;
         &lt;ul class="submenu four_col"&gt;
                
                &lt;li&gt;&lt;a href="#"&gt;Submneu&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
        &lt;/li&gt;

    &lt;/ul&gt;
&lt;/div&gt;

&lt;!-- mega menu end --&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks</p>