BREADCRUMB WITH CSS

Run
<!DOCTYPE html>
<html lang="en">
<head>
 <title>HTML </title>
 <style>
	/* Remove default style of list */
	.breadcrumb{
	  padding: 8px 14px;
	  list-style: none;
	  background-color: #cccccc;
	}

	/* Display list items horizontally*/
	 li {
	  display: inline;
	  font-size: 16px;
	}

	/* Add a backslash symbol (/) before each list item */
	li+li:before {
	  padding: 10px;
	  color: green;
	  content: ">";
	}

	/* Remove style of links */
	 a  {
	  color: blue;
	  text-decoration: none;
	}

	/* Add a color on hover */
	 a:hover {
	  color: black;
	}
		
 </style>
</head>
<body>
  <ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Study Material</a></li>
  <li><a href="#">Course</a></li>
  <li>More</li>
</ul> 
</body>
</html>