html - css如何创建导航栏

Question

我正尝试在 CSS 中实现这一点。试图制作这个导航栏。任何帮助都会很棒。这就是我想要做的:

所以第一张图片是用户进入网站时的样子。然后，如果他们将鼠标悬停在任何选项卡上，它应该只会改变颜色。尝试做到这一点的任何帮助都会很棒。我试过这个但不会工作。

HTML:

<div class="horizontal">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Register.html">Register</a></li>
<li><a href="Rules.html">Rules</a></li>
</ul>
</div>

只需要看看 css 会是什么样子。再次感谢

按照人们的意愿编辑我所做的 2 请参阅:

div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
  display: inline-block;
  margin-left: 5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}

就像我说的那样，这是不对的，但这就是我在 atm 上所能做的。谢谢

Answer 1

使用您的 HTML，您可以执行如下操作:

CSS

ul{
    list-style:none;
}

li{
    float:left;
    width:100px;
    height:50px;
    background:black;
    border:2px solid gray;
    text-align:center;
}

a{
    color:white;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
    line-height:50px;
    font-style:italic
}

li:hover{
    background:gray;
}

JSFiddle .

只需更改颜色即可。