Page Widget How to - Create Navigation Bar with left border

Question

We would like to know how to create Navigation Bar with left border.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
ul {<!--from  ww w  .  j  a va 2 s . c  om-->
  padding: 0;
  list-style: none;
}

ul li {
  display: inline;
  padding: 0 20px;
  border-left: 1px solid #000000;
}

li:first-child {
  border-left: none;
}
</style>
</head>
<body>
  <h1>Navigation Bar</h1>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Services</li>
    <li>Contact Us</li>
  </ul>
  <p>
    <strong>Note:</strong> To make
    <code>:first-child</code>
    to work in IE8 and earlier, a
    <code>&lt;!DOCTYPE&gt;</code>
    must be declared at the top of document.
  </p>
</body>
</html>

The code above is rendered as follows: