首先创建一个html的是文件。

然后创建一个div，并为它的id属性命名为menu

在该div下创建一个无序标签ul,并在ul标签添加列表项标签内容。

此时因为没有添加div和a标签的css样式，所以效果如下，这显然不是我们的需要。

在html头部添加css。通过id选择器添加导航栏div的样式，包括border边框样式，background-color背景颜色，宽、高。具体还是看你个人的需要。

添加了div的css样式之后，跟我们的需要是有点像了。但列表纵向是不行的。

然后我们通过层级选择器，将纵向列表改成横项。display是显示效果，inline见名知义显示在一行上。再改变颜色

改完之后如图，基本上可以了。

当然有需要我们也可以去掉a标签所带来的下划线。再把字体之间的距离调整一下会更好看。

通过

text-decoration:none;去掉下划线。然后html中通过nbsp;（占一个字符，所以两个占一个中文字）转义字符添加空格，这样可以拉大字体间的距高。

这样导航栏的效果基本就出来，具体效果如下虽然可能还有点不好看，但也差不多可以了。