Adding a dropdown arrow or triangle beside first button - html

Question

In the below navigation bar
https://codepen.io/shaswat/pen/XzpRXL
how to create a down triangle or down-arrow beside home and when hover on home the triangle or arrow should convert to upside .
cant change any html(input type , value etc) but you can add some element that should not break the navigation bar how its looking now
no bootstrap
HTML
<div id='cssmenu'>
<ul>
<li ><input type=submit value=home>
<ul>
<li><input type=submit value=home1 /></li>
<li><input type=submit value=home2 /></li>
<li><input type=submit value=home3 /></li>
</ul>
</li>
<li><input type=submit value=products class=active />
</li>
<li><input type=submit value=about />
</li>
<li><input type=submit value=Contact /></li>
</ul>
</div>
CSS
#cssmenu > ul ul input{
border-top: 1px solid;
}
#cssmenu input {
padding: 0;
border-right: 1px solid;
border-top: none;
border-bottom: none;
border-left: none;
background: none;
border-radius : 0px 5px 0px 0px;
}
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > input {
padding: 12px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > input {
background: red;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
}
#cssmenu > ul > li.active > input,
#cssmenu > ul > li > input.active {
background: black;
color:#fff;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #fff;
z-index: 2;
top: 40px;
left: 0;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li input {
padding: 12px ;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
#cssmenu > ul ul li input:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li input:active {
background: green;
}

Answer 1

use font awesome icons class fa-caret-up and fa-caret-down
and use javascript onmousehover and onmouseout functions to toggle caret up and down.
include font-awesome and jquery libs
<a onmouseover="changecaretup()" onmouseout="changecaretdown()" >home <i id="caret" class="fa fa-caret-down" aria-hidden="true"></i></a>
java script
function changecaretup(){
$("#caret").removeClass("fa-caret-down");
$("#caret").addClass("fa-caret-up");
}
function changecaretdown(){
$("#caret").removeClass("fa-caret-up");
$("#caret").addClass("fa-caret-down");
}

Answer 2

Atlast did it by myself , with HTML unicodes solution
https://codepen.io/shaswat/pen/XzpRXL
usin css only to make it transition between uparrow and downarrow
HTML
<div id='cssmenu'>
<ul>
<li ><input type=submit value='Home'/>
<div class="downArrow"> ▼ </div>
<div class="upArrow"> ▲ </div>
<ul>
<li><input type=submit value=home1 /></li>
<li><input type=submit value=home2 /></li>
<li><input type=submit value=home3 /></li>
</ul>
</li>
<li><input type=submit value=products class=active />
</li>
<li><input type=submit value=about />
</li>
<li><input type=submit value=Contact /></li>
</ul>
</div>
CSS
#cssmenu > ul ul input{
border-top: 1px solid;
}
#cssmenu input {
padding: 0;
border-right: 1px solid;
border-top: none;
border-bottom: none;
border-left: none;
background: none;
border-radius : 0px 5px 0px 0px;
}
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > input {
padding: 12px 30px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > input {
background:violet;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
}
#cssmenu > ul > li.active > input,
#cssmenu > ul > li > input.active {
background: black;
color:#fff;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #fff;
z-index: 2;
top: 40px;
left: 0;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li input {
padding: 12px ;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
#cssmenu > ul ul li input[type=submit]:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li input[type=submit]:active {
background: green;
}
.downArrow {
display: block;
position: absolute;
top: 12px;
right: 2px;
color:white;
}
.upArrow {
display: none;
position: absolute;
top: 12px;
right: 2px;
color:white;
}
#cssmenu li:first-child:hover .upArrow{
display: block;
}
#cssmenu li:first-child:hover .downArrow{
display: none;
}