html - 点没有出现

Question

我希望这些点显示出来，稍后我想用它创建一个固定的侧边导航。它不再出现了。我试图解决它，但是当点出现然后消失时

 .dot {
        height: 0.8em;
        width: 0.8em;
        background-color: #fff;
        border-radius: 50%;
        float: right;
        margin-bottom: 2em;
        margin-right: 2em;
        
    }
    
    
    .sitenav {
        height: auto;
        width: 1em;
        float: right;
        position: fixed;
        }

<div class="sitenav">
        <a href="#start"><span class="dot" id="f"></span></a>
        <a href="#two"><span class="dot" id="i"></span></a>
        <a href="#three"><span class="dot" id="r"></span></a>
        <a href="#four"><span class="dot" id="s"></span></a>
        <a href="#five"><span class="dot" id="t"></span></a>
        </div>
    
    <div id="start">
    <div class="site">
    </div>
    </div>

   

Answer 1

从 .sitenav 中移除宽度(1em 小于 5 x 2.8em，因此溢出被隐藏)并将颜色更改为白色以外的任何颜色。

 .dot {
        height: 0.8em;
        width: 0.8em;
        background-color: #f00;
        border-radius: 50%;
        float: right;
        margin-bottom: 2em;
        margin-right: 2em;
        
    }
    
    
    .sitenav {
        height: auto;
        /*width: 1em;*/
        float: right;
        position: fixed;
        }

<div class="sitenav">
        <a href="#start"><span class="dot" id="f"></span></a>
        <a href="#two"><span class="dot" id="i"></span></a>
        <a href="#three"><span class="dot" id="r"></span></a>
        <a href="#four"><span class="dot" id="s"></span></a>
        <a href="#five"><span class="dot" id="t"></span></a>
        </div>
    
    <div id="start">
    <div class="site">
    </div>
    </div>