Page Widget How to - Separate menu item with dotted line

Question

We would like to know how to separate menu item with dotted line.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#main {<!--  ww  w  .j a  va  2s.  c  om-->
  width: 864px;
  margin: 0 auto;
}

nav#main-navigation li {
  margin: 0;
  padding: 0;
  border-right: 1px dotted #222;
  color: #222;
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

nav#main-navigation li a {
  display: block;
  padding: 15px 10px;
  font: 11px/12px sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

nav#main-navigation li:last-child {
  border: 0;
}
</style>
</head>
<body>
  <div id="main">
    <nav id="main-navigation">
      <ul>
        <li id="nav1"><a href="#">Lorem ipsum dolor sit ametzu</a></li>
        <li id="nav2"><a href="#">Lorem ipsum dolor sit am</a></li>
        <li id="nav3"><a href="#">Lorem ipsum dolor sitd</a></li>
        <li id="nav4"><a href="#">Lorem ipsum dolo</a></li>
        <li id="nav5"><a href="#">Lorem ipsum do</a></li>
      </ul>
    </nav>
  </div>
</body>
</html>

The code above is rendered as follows: