W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h2>Lists</h2>
<p>The w3-ul class removes list bullets and adds padded items with separator lines.</p>
<p>Combine it with other classes to add borders, colors, or hover effects.</p>

<h3>Basic List</h3>
<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

<h3>Bordered List</h3>
<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

<h3>Colored List</h3>
<ul class="w3-ul w3-border w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

<h3>Hoverable List</h3>
<p>The w3-hoverable class changes the background of each item when you move the pointer over it.</p>
<ul class="w3-ul w3-border w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

<h3>Custom Hover Colors</h3>
<p>Apply a hover color class to each list item to give it a different hover color.</p>
<ul class="w3-ul w3-border">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-green">Eve</li>
  <li class="w3-hover-blue">Adam</li>
</ul>

</body>
</html>