我想要仿制以下网页开头的导览列：
https://theinitium.com/article/20161030-dailynews-south-korea-president/
网页开头的导览列的超连结 他的底线不是传统的 利用text-decoration来设置
而是用超连结元素本身的border-bottom来设置
鼠标只要hover到超连结 border-bottom就会显示在导览列中央的水平线上
我的问题就出在这边
以下是我的code：
https://jsfiddle.net/ajd16f2a/3/
一开始我先设定两个ul 两个ul都有border 用来产生两个ul之间的水平线
然后我设定li的margin为15px 让超连结跟下方的水平线有间隔
接着我在li内增加超连结 并对超连结设定border-bottom 取代传统的底线
并在css字段内设定超连结在被鼠标hover时 底线要出现在水平线的边缘
然后问题就来了
现在有两个ul 我设定上方的ul内的超连结的padding为15px
这样可以刚好让该超连结的border-bottom贴在水平线上方
但下方的ul内的超连结 其padding我一样设为15px
但是这个超连结的border-top却会刚好跟水平线重叠
所以我才将超连结的paddding改为13px 要这样才能做出跟原始网页相同的效果
但我不能理解
为何上下li的margin都设为15px
超连结的padding也都设为15px 上下两边呈显的效果会不同
如果有错 要如何修改才能使padding相同 且上下两边超连结底线的效果相同呢