title: How can I transform dots to line between CSS menu items?
body: <p>I have CSS vertical menu and I want to make dots between shapes like this photo </p>
  
  <p><a href="http://s15.postimg.org/vz4jok3wr/Untitled_2.jpg" rel="nofollow">http://s15.postimg.org/vz4jok3wr/Untitled_2.jpg</a></p>
  
  <p>We can see line from Home to ABOUT and from ABOUT to Games(current item) I need when I choose programs this dots transform to line , and when I choose Home or any item above lines transform to dots and etc.... ,</p>
  
  <pre><code>&lt;style&gt;
  body{background-color:#000;}
  ul,
  ul li,
  ul li a { margin-bottom:30px;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    color:#999;
    margin-left:20px;
  }
  .active { color:#F00;}
  
  *, *:before, *:after{ 
      box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
  } 
  .css-shapes-preview{ 
      position: relative; 
      height: 10px; 
      width: 10px; 
      background-color: #428bca; 
      border-radius: 150px; 
  }
  &lt;/style&gt;
     &lt;ul&gt;
        &lt;li class="css-shapes-preview"&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="css-shapes-preview"&gt;&lt;a href='#'&gt;&lt;span&gt;ABOUT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="css-shapes-preview"&gt;&lt;a href='#' class="active"&gt;&lt;span&gt;GAMES&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="css-shapes-preview"&gt;&lt;a href='#'&gt;&lt;span&gt;SONGS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="css-shapes-preview"&gt;&lt;a href='#'&gt;&lt;span&gt;PROGRAMS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="css-shapes-preview"&gt;&lt;a href='#'&gt;&lt;span&gt;DESIGNS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  </code></pre>