I’m trying to practice my HTML5 and CSS3 skills by making a navbar for my page, but I’m having a lot of trouble. I'm trying to use HTML5 semantic tags to make it, but none of them are looking how I want them to and it is a huge positioning mess. Could someone please tell me how I could make a functional navbar?
Here’s my HTML code for the whole navbar and header:
body {
margin:0;
}
#nav-plus-head-wrapper {
background: blue;
height: 100px;
position: absolute;
top: 0px;
left:0px;
right:0px;
}
#topheader {
}
#topnav {
background: yellow;
position: relative;
top: 0px;
right: 0px;
}
.navli {
display: inline;
}
a:link {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: none;
color: orange;
}
a:visited {
text-decoration: none;
color: white;
}<section id="nav-plus-head-wrapper"><!--CODE FOR WEBSITE NAME--><header id="topheader"><h1>Site</h1></header><!--CODE FOR TOP NAVBAR--><nav id="topnav"><ul id="topnav-ul"><li class="navli"><a href="">Home</a></li><li class="navli"><a href="">About</a></li><li class="navli"><a href="">Services</a></li><li class="navli"><a href="">Contact</a></li></ul></nav></section>