html - 创建在任何地方点击的按钮进行导航

Question

对于你们中的许多人来说，这可能是一个非常简单的问题，但我似乎无法弄清楚，我已经解决了大约一个小时。

我正在尝试创建一个带有按钮的导航栏。我希望按钮具有以下功能，但我不知道如何实现它们:

• 单击按钮上的任意位置将激活按钮重定向。
• 该字体不像常规文本超链接那样带有下划线或重新着色。
• 字体更“肥”(我不知道还能怎么形容。

在图片中，我用小红叉表示我希望能够单击这些位置以使其工作。

我添加了一个 jsfiddle到目前为止我已经取得的成就。

我的 html:

<ul>
    <li><a id="nav" href="#">Page1</a></li>
    <li><a id="nav" href="#">Page2</a></li>
    <li><a id="nav" href="#">Page3</a></li>
    <li><a id="nav" href="#">Page4</a></li>
</ul>

我的 CSS:

body {
    margin: 0px
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {

    float:left;
    overflow: auto;
    padding: 6px 12px 6px 12px;
    background-color: grey;

    border: 1px solid #000;
    text-decoration: none;
    margin: 0;
    border: 0;
    margin-right: 3px;
    font-weight: bolder;
    color: yellow;
}

ul li:hover{
    background-color: black;   
}
}

Answer 1

将 ul li { 替换为 ul li a{ 并将 ul li:hover{ 替换为 ul li a:hover{

http://jsfiddle.net/vxre4x2k/2/