Ya no necesitas investigar más en internet porque llegaste al lugar exacto, contamos con la respuesta que necesitas y sin complicarte.
Ejemplo 1: barra de navegación html
<body><ulclass="topnav"><li><aclass="active"href="Home.html">Homea>li><li><ahref="Page1.html">Page1a>li><li><ahref="Page2.html">Page2a>li><liclass="right"><ahref="About.html">Abouta>li>ul>body>
ul.topnav
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: arial;
text-align: left;
width: 100%;
position: sticky;
top: 0;
ul.topnav li float: left;
ul.topnav li a
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
font-size: 17px;
border-right: 1px solid #bbb;
ul.topnav li a:hover:not(.active)
background-color: #ddd;
color: black;
ul.topnav li a.active
background-color: #4CAF50;
ul.topnav li.right
float: right;
@media screen and (max-width: 720px)
ul.topnav li
width: 100%;
ul.topnav a
width: 100%;
Ejemplo 2: barra de navegación en css
<nav><divclass="nav-wrapper"><ahref="#"class="brand-logo">Logoa><ulid="nav-mobile"class="right hide-on-med-and-down"><li><ahref="sass.html">Sassa>li><li><ahref="badges.html">Componentsa>li><li><ahref="collapsible.html">JavaScripta>li>ul>div>nav>Ejemplo 3: barra de navegación CSS
<ul><li><ahref="default.asp">Homea>li><li><ahref="news.asp">Newsa>li><li><ahref="contact.asp">Contacta>li><li><ahref="about.asp">Abouta>li>ul>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)