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

Question

I am creating a simple menu, but I have a problem on the border. I need to display the full left border in li elements. could you help me?

I get the output as follows. I need a conclusion 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-->

Run codeHide result

Answer 1

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

I put the border on the left to see if, instead of: before, so all the added code here:

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

Answer 2

( , ), flex, . (.. .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-->

Hide result

Answer 3

You can try these 2 fixes:

• display: table-cell; on the <li>
• give height: 100%;your body / html and your<ul>

Basically, yours <li>does not consume the entire height of its parent. Any of these two should do this.