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;
}

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

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;
}

JSF中。

只是改变颜色。