Html 如何将点转换为CSS菜单项之间的线条？

我有CSS垂直菜单，我想做点之间的形状像这张照片

当我选择程序时，我们可以看到从家到大约和从大约到游戏的线条当前项目点转换为线条，当我选择家或线条上方的任何项目转换为点等等

<style>
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; 
}
</style>
   <ul>
      <li class="css-shapes-preview"><a href='#'><span>Home</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>ABOUT</span></a></li>
      <li class="css-shapes-preview"><a href='#' class="active"><span>GAMES</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>SONGS</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>PROGRAMS</span></a></li>
      <li class="css-shapes-preview"><a href='#'><span>DESIGNS</span></a></li>
   </ul>

---

我建议创建一个新元素，在这种情况下，您可以使用伪元素来保持标记的语义，并给它一个虚线边框。请参阅上的示例。相关的CSS是：

ul:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 5px;
    margin-left: 24px;
    /* red for visibility, you can obviously make whatever color you want */
    border-left: 2px dotted red; 
}

---

这在您上面发布的几行中没有定义。能否请您在jsfiddle.net中添加一个代码示例。或者尝试在CSS/JS中搜索Dashed你用来创建它们的CSS都不在你上面发布的CSS中，甚至没有实线，也没有看到添加的内容。这几乎是不可能的。我搜索这个想法，找到这个网站，让这个菜单成为我想要的，但我找不到如何让它成为我尝试了很多代码并创建了其他菜单但结果是一样的。谢谢，但我需要当我选择游戏项目时，上面的所有项目都转换为线，下面的所有项目都转换为点，而不仅仅是活动项目，因为你可能需要为每个项目附加一个类，在它下面需要一条实线。然后，将边界放在li:before元素上，而不是放在ul:before元素上。使其仅为两个元素之间的高度，如果给定元素指定它应为实线，则使该线为实线。现在没有时间把JSFIDLE放在一起，但是试一试。试过但没有效果：。。。。。我搜索此想法并发现此网站制作此菜单可能会有所帮助，注意：