CSS Dotstyle导航问题

Question

我工作的这个网页，希望实现在右侧dotstyle导航：

http://aliantesolution.it/chi_new.php

为了做到这一点，我已经使用这个工具：http://tympanus.net/Development/DotNavigationStyles/

该链接是在点上滚动时出现的标志，但我需要该链接作为点本身，因为对用户来说更直观。有人知道我该怎么做？

我只是试图改变代码为

<a href="#link><li>caption</li></a> 

这样我获得工作作为一个链接点，但没有标志。

非常感谢！

Answer 1

完成它，我把李元素放在A中，并使用属性“title”作为工具提示。代码如下解释：

<div class="dotstyle"> 
         <ul> 
          <a title="chi" class="tooltip" href="#chisiamo"> 
          <li title="chi"></li> 
          </a> 
          <a title="organizzazione" class="tooltip" href="#organizzazione"> 
          <li title="organizzazione"></li> 
          </a> 
          <a title="etica" class="tooltip" href="#etica"> 
          <li title="etica"></li> 
          </a> 
          <a title="mission" class="tooltip" href="#mission_but"> 
          <li title="mission"></li> 
          </a> 
         </ul> 
    <div> 

    .dotstyle ul { 
    width: 9px; 
    position: fixed; 
    right: 70px; 
    top:45%; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    cursor: default; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    z-index:50; 
} 

.dotstyle li { 
    border: 2px solid #FD4F00; 
    border-radius: 50%; 
    z-index: 1; 
    position: relative; 
    display: block; 
    float: left; 
    margin: 10px 0; 
    width: 8px; 
    height: 8px; 
    cursor: pointer; 
} 
.dotstyle a { 
    text-decoration: none; 
} 

.tooltip{ 
    display: inline; 
    position: relative; 
} 

.tooltip:hover li:after{ 
    position:absolute; 
    background: #FD4F00; 
    bottom: 26px; 
    color: #fff; 
    content: attr(title); 
    top: auto; 
    bottom: -82%; 
    right: 370%; 
    padding: 5px 15px; 
    z-index: 98; 
    font-weight: 900; 
    text-transform: uppercase; 
    font-size: 11px; 
} 

.tooltip:hover li:before{ 
    border: solid; 
    border-color: transparent; 
    border-left-color: #FD4F00; 
    border-width: 6px; 
    bottom: -20%; 
    content: ""; 
    left: -270%; 
    position: absolute; 
    z-index: 99; 
    -webkit-transition: opacity 0.3s ease; 
    transition: opacity 0.3s ease; 
}