In the navigation bar displayed below
https://codepen.io/shaswat/pen/XzpRXL
Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML elements (such as input type and value)? Additionally, no Bootstrap should be used.
No modifications to the existing HTML structure are allowed, but new elements can be added without disrupting the current appearance of the navigation bar.
Avoid utilizing Bootstrap for this task.
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;
}