推出导航菜单 - 背景css麻烦

Question

Live site.

我有一个推出导航菜单，其中（理想情况下）第一组按钮的两边应该20px #000104。将鼠标悬停在“关于”和“属性”上后，将在扩展选项后面继续#000104。

但是，我无法限制第一组按钮的大小。做这个的最好方式是什么？ （我的主要麻烦是每个按钮的长度不同 - 关于，博客，联系人，属性;如何动态调整背景颜色？）

jsfiddle.

Answer 1

您想在background: #000104代码上使用a，而不是ul代码。这样，颜色不会延伸到无序列表的整个宽度;它只会扩展到a文本。此外，要使按钮在每侧更多地延伸，请在左侧和右侧添加20px的padding。

nav ul li a {
    background: #000104;
    padding-left: 20px;
    padding-right: 20px;
}

JS Fiddle Example