Generally, a website menu begins with a series of links that are a list. Once the list has been created you then use CSS to style that list into a beautiful menu which often means buttons and sub menus.

Here is an example of a simple nav menu:
<nav>
<ul class="nav-menu">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About Us</a></li>
<li><a href="/contact.html:>Contact Us</a></li>
</ul>
</nav>

The first thing you want to do is hide the bullets:

ul .nav-menu{
list-style-type: none;
}

Next, if this is a top navigation you want the list to sit horizontally:

ul .nav-menu li {
display:inline-block;
}

Now you want to make sure to remove the default browser settings for how links display in a line so again under the ul .nav-menu li you add the following:

ul .nav-menu li {
display:inline-block;
margin: 0;
padding: 0;
}

When you are doing the actual menu items links themselves you want to pick a general width so they are evenly spaced. This may vary from site to site depending on how many menu items you have:

.nav-menu li a{
width: 60px;
}

Most of the time you do not want the underline to show in your links for your future button/menu item so you add no text decoration:

.nav-menu li a{
width: 60px;
text-decoration:none;
}

To create a background for your new menu you would add to the ul tag the background-color property:

ul .nav-menu{
list-style-type: none;
background-color: #3399ff;
}

Note you can add the width of your buttons in the ul as well for some websites. CSS is versatile.

Now if you want to get a little fancy and add just a small additional little animation you can have the button change with hover. Please note that you should also change your font color if the contract on hover is great enough. AKA a lighter color button would have black font and a darker one would have a white font. The color property will make that change for you on hover:

.nav-menu li a:hover {
background-color: #000066;
color: #fffff;
}

This covers a very basic navigation menu with no sub-menus. In a later week that will be covered.

Information Retrieved from

https://www.w3schools.com/css/css_list.asp
https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
https://www.w3schools.com/css/css_navbar.asp
https://www.w3schools.com/colors/colors_picker.asp