Creating vertical line at the center of li - html

Question

I have created a html page with ul and li's to show some links and set up some background color to the li's. Now I want to add vertical line on the li's.
When I try to set up a image it is coming as shown in figure 1 but I want it to be as shown in figure 2.
figure 1
figure 2
What I have tried so far:
ul#sitemap1 {
list-style: none;
}
ul#sitemap1 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
#sitemap1 li {
clear: left !important;
margin-top: 0px !important;
padding: 10px !important;
background: url('/Images/ConnectLine.JPG') no-repeat !important;
float: inherit;
}
ul#sitemap1 li a:hover {
background-color: Orange;
}
ul#sitemap2 {
list-style: none;
}
ul#sitemap2 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap2 li a:hover {
background-color: Orange;
}
ul#sitemap3 {
list-style: none;
}
ul#sitemap3 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap3 li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">
Home
<li>Services</li>
<li>Organizational Change</li>
<li>kit</li>
<li>Sheets</li>
</ul>
<ul id="sitemap2">
Engagement
<li>Ideas</li>
<li>WorkSmart</li>
</ul>
<ul id="sitemap3">
Related Links
<li>GO-TIME</li>
</ul>

Answer 1

I suggest remove the id's form the CSS, no need to duplicate the same CSS just refer to the ul tag.
You can use :after pseudo-element to create the line.
Use :last-child to remove the line form the last item.
ul {
list-style: none;
}
ul li {
width: 220px;
position: relative;
margin-bottom: 20px;
}
ul li:after {
content: "";
position: absolute;
top: 90%;
left: 50%;
height: 25px;
background: black;
width: 4px;
border-radius: 5px;
border: 2px solid white;
z-index: 100;
}
ul li:last-child:after {
display: none;
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">Home
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">Engagement
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">Related Links
<li>GO-TIME
</li>
</ul>

Answer 2

you can use a pseudo element ::after in the a child of li
Note you can only have li as direct childs of ul. otherwise it is invalid HTML
I tweaked your CSS removing duplicated properties.
ul {
list-style: none;
margin-top: 30px
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
position: relative
}
ul li a::after {
position: absolute;
top: 100%;
left: 50%;
background: black;
width: 5px;
height: 100%;
content: ""
}
ul li:last-of-type a::after {
background: transparent;
height: 0
}
ul li a:hover {
background-color: Orange;
}
<div>
<h1>Innovations</h1>
<ul id="sitemap1">
<li>Home
</li>
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">
<li>Engagement
</li>
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">
<li>Related Links
</li>
<li>GO-TIME
</li>
</ul>

Answer 3

Try this, same you could try for sitemap 1 and 3.
ul#sitemap2 li::after{
content:'';
border:3px solid #111;
height:50px;
margin-left:110px;
}