如何制作功能强大的HTML5导航栏

我试图通过为我的页面制作导航栏来练习我的HTML5和CSS3技能，但我遇到了很多麻烦。我正试图使用HTML5语义标签来实现它，但没有一个是我想要的，这是一个巨大的定位混乱。有人能告诉我如何制作一个实用的导航条吗

以下是我的整个导航栏和标题的HTML代码：

正文{
保证金：0；
}
#导航加头部包裹器{
背景：蓝色；
高度：100px；
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
}
#上头{
}
#顶置导航{
背景：黄色；
位置：相对位置；
顶部：0px；
右：0px；
}
纳夫利先生{
显示：内联；
}
a:链接{
文字装饰：无；
颜色：红色；
}
a:悬停{
文字装饰：无；
颜色：橙色；
}
a:参观了{
文字装饰：无；
颜色：白色；
}

场地

首先，您需要按如下方式重置所有html：

*, *:after, *:before {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

然后你把你的

漂到左边，也许是个徽标

#topheader {
float:left;
    color:white;
}

你将

对准主导航

#topnav {
    position: relative;
    top: 20px;
    float:right;
}

现在您可以像这样设置项目

.navli {
    float:left;
    list-style:none;
    width:24%;
    height:100%;
    padding:20px;
    margin:0 0 0 1%;
    background-color:#ccc;
}

---

演示：

您好！您应该将代码放在JSFIDLE中，以便其他人可以使用它，使其更容易帮助您。@Andrew制作一个脚本很有帮助，但我认为“应该”夸大了它的必要性。您必须确保人们知道，只将代码放在问题中比只放在JSFIDLE上更好。好的，我该怎么做？@user2647716转到。将HTML和CSS粘贴到相应的面板中。单击“保存”，您将被重定向到一个唯一的URL。在代码之前或之后，在问题中链接到该URL。在这个URL上，人们可以看到你的代码在页面上的样子，并在页面上编辑代码。好的，谢谢，我很快就会这么做。