Vertical Demo with Following Line - html

Question

I have a Functional Vertical Menu. On hover state it has a vertical line that changes from same Background color to a specific color, but what I want is to create a line that follows to the selected menu área.
Attached my Actual Code and the GIF example of what I'm trying to Achieve, someone can help me?
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
CSS
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;
}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul li a:hover{
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}

Answer 1

You could use after pseudoelement in your ul hidden and the with a simnple transition and jquery you can make it move playing with the top property.
like this:
$('.upli').hover(function () {
$(this).parent('ul').toggleClass('up');
});
$('.downli').hover(function () {
$(this).parent('ul').toggleClass('down');
});
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul:after {
content:'';
width:5px;
height:28px;
display:block;
position:absolute;
opacity:0;
top:14px;
left:0;
background-color:#0099FF;
transition: top 0.5s ease;
}
#nav .up:after {
top:0px;
opacity:1;
}
#nav .down:after {
top:28px;
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul class="">
<li class="upli">Example 1</li>
<li class="downli">Example 2</li>
</ul>
</div>

Answer 2

How about this really nice and clean solution (also extendable to an infinite amount of <li> items ;)
$('li').hover(function() {
$(".verticalLine").css("top", $(this).position().top);
}, function() {
$(".verticalLine").css("top", "0px");
});
body {
margin: 0;
}
.nav {
position: relative;
}
.verticalLine {
background: coral;
height: 60px;
width: 5px;
position: absolute;
top: 0;
transition: top ease .5s;
left: 0;
}
ul {
margin: 0;
}
ul li {
list-style: none;
height: 60px;
line-height: 60px;
vertical-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<div class="verticalLine"></div>
<ul>
<li>Something</li>
<li>Something else</li>
<li>Something more</li>
<li>Aaaand more</li>
</ul>
</div>
EDIT:
This change the hover part to this piece of code if you want to use the click() element:
$(".nav2Li").click(function() {
$(".verticalLine").css("top", $(this).position().top);
})