html - 如何在 CSS3 的导航栏上创建按钮链接？

Question

当我尝试创建一个按钮时，我在其上嵌入了一个链接，该链接具有您单击该按钮的功能，即使它在使用 HTML5 和 CSS3 的导航栏上的确切字符串之外，我也无法创建我希望的内容。以下代码缺少什么？

HTML文件

<nav>
     <ul id='main_menu'> 
        <li><a href='/'>Home</a></li>
        <li><a href='/l1'>Link1</a></li>
        <li><a href='/l2'>Link2</a></li>
        <li><a href='/l3'>Link3</a></li>
    </ul>
</nav>

还有，CSS文件

ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}

当我打开浏览器并访问它时，结果是一个蹩脚的按钮，没有点击字符串外部的功能。怎么可能？

谢谢。

Answer 1

请尝试以下CSS

ul#main_menu li {
display:block;
list-style:none;
float:left;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 2px solid;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: #ff0000;
border: 3px solid;
}