Menu arrow follow

by george_black

HTML

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    
    <div id="arrow"></div>

</ul>

CSS

ul{
	width: 100%;
    margin: 0;
}
li{
	display: inline-block;
	border: 1px solid red;

    width: 100px;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

li:nth-child(1):hover ~ #arrow{
	margin-left: 0;
}
li:nth-child(2):hover ~ #arrow{
	margin-left: 100px;
}
li:nth-child(3):hover ~ #arrow{
	margin-left: 200px;
}
li:nth-child(4):hover ~ #arrow{
	margin-left: 300px;
}
li:nth-child(5):hover ~ #arrow{
	margin-left: 400px;
}

li:hover ~ #arrow{
	opacity: 1;
}

#arrow{
    margin-left: -50px;
    border:0px solid red;
    position:relative;
    width:100px;
    text-align:center;
	opacity: 0;
    
	transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
#arrow:before{
    content:"";
    display:block;
    width:0;
    border:10px solid red;
    border-color:red  transparent transparent transparent;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-10px;
}