我怎么能在导航上添加悬停？

Question

我想在a元素上添加一个悬停以显示一个圆形按钮，但它需要li元素的整个空间而不是导航中的一个大按钮。

my codepen link

我该怎么做呢？我是否需要更新此代码以使其成为我想要的样子

Answer 1

从display: block和#header a移除#header a:hover，并将填充更改为padding: 0 14px以暂停a。

Updated CodePen

Answer 2

减小li元素的宽度，使其不是100％/ 5，而是80％/ 5

CodePen链接http://codepen.io/anon/pen/EWVXYj?editors=1100。

然后在li元素中添加一些填充。

li {
      width: calc(80% / 5);
      padding: 2%;
}

Answer 3

只需将标签的显示属性从display：block更改为display：inline-block，同样适用于：hover too

a {
    text-align: center;
    display: inline-block;
    height: auto;
    background: $main;
    padding: 3px 5px;
    &:hover {
      display: inline-block;
      border-radius: 10px;
    }