How to add left border with full height in li element?

Question

I am creating a simple menu but I am getting an issue in the border. I have to display full left border in li elements.Would you help me in this?

I am getting output like this. I need output like this.

body{
	margin: 0;
	padding: 0;
}
.dash-menu
{
background-color: #763E9B;
width: 100%;
min-height: 100px;
color: #fff;
}
.dash-menu h2
{
	float: left;
}
.dash-header ul
{
	float:right;
	list-style: none;
}
.dash-header li{
	float: left;
	margin: 20px;
}
.dash-header li:before{
content: '|';
color: #A569BD;
display: inline-block;
border-left: 3px solid yellow; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dash-menu">
	<h2>Hi , Welcome back</h2>
<div class="dash-header">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li><i class="fa fa-bars" aria-hidden="true"></i></li>
</ul>
<img src="">
</div><!--dash-header-->
</div><!--dash-menu-->

Answer 1

I put this together pretty quick, so I'm sure it could be done in a more elegant way. https://jsfiddle.net/3tqxogLk/

I put the border-left on the li itself rather than :before, so all the code i added is here:

.dash-header li{
  float: left;
  height: 20px;
  margin-top: -20px;
  padding-top: 40px;
  padding-bottom: 44px;
  border-left: 3px solid yellow; 
}

Answer 2

If using a table isn't necessary (which I don't think it is for menus), I like using flex because I find it more responsive and easier to customize and control. I often set flex options as classes and apply them as necessary (i.e. .justify-between & .justify-around)

body{
  margin: 0;
  padding: 0;
}

.dash-menu{
  display:flex;
  flex-direction:row; /* Flex is row by default, so this is just FYI */
  justify-content: space-between;
  width:100%;
  background:#763E9B;
  color:#FFFFFF;
}

.dash-menu h2{
  padding:0 10px;
}

.dash-menu ul{
  display:flex;
  align-items:center;
  padding:0;
  margin:0;
}

.dash-menu ul li{
  display:flex;
  align-items:center;
  min-height:100%;
  padding:0 10px;
  list-style-type: none;
  border-left: 3px solid yellow; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dash-menu">
  <h2>Hi, Welcome back</h2>
  <ul>
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>
    <li><i class="fa fa-bars" aria-hidden="true"></i></li>
  </ul>
  <img src="">
</div><!--dash-menu-->