浏览器放至最大显示没有问题，但是改变浏览器窗口大小，出现混乱

截图如下，出现堆叠：

希望达到的效果如下：

代码：
html

    
    
    
    
    
    



    
首页
    
    
问题
    
    
专栏
    
    
用户
    
    
特色
    
    
在线客服

css

.row {
    background-color: rgba(51, 51, 51, 1);
    height: 60px;
    width: inherit;
    box-shadow: 0 5px black inset;
}

#a1 {
    position: absolute;
    height: 64px;
    width: 172px;
    margin-left: 60px;
    margin-top: 3px;
}

#a2 {
    color: white;
    font-size: 28px;
    font-weight: bold;
    margin-top: 15px;
    margin-left: 240px;
    position: absolute;
}


#a3,#a4,#a5,#a6,#a7,#a8 {
    position: absolute;
    color: white;
    margin-top: 15px;
    font-size: 18px;
    float: none;
}
#a3 {  color: #FFCC00;  margin-left: 55%;  }
#a4 {  margin-left: 61%;  }
#a5 {  margin-left: 65%;  }
#a6 {  margin-left: 71%;  }
#a7 {  margin-left: 79%;  }
#a8 {  margin-left: 85%;  }


#a_1,#a_2,#a_3,#a_4,#a_5,#a_6 {
    position: absolute;
    color: white;
    margin-top: 15px;
}
#a_1 {  margin-left: 60%;  }
#a_2 {  margin-left: 64%;  }
#a_3 {  margin-left: 70%;  }
#a_4 {  margin-left: 78%;  }

`
麻烦大家帮我看看怎么实现？谢谢