A menu is just a collection of hyperlinks--in other words it's a list! Let's treat it as such.
This is a simple unordered list with no additional formatting.
First, remove the bullets. The CSS is: list-style-type: none;
Next, remove the underlines. The CSS is: Text-decoration: none;
Now convert this to a horizontal menu and add some padding. The CSS is Display: inline; padding-right: 10px;
Finally add interactivity with pseudo-classes.
A pseudo-class is a predefined class used to apply a special effect to a selector. There are five related to hyperlinks and they should be formatted in the order given below to avoid occasional odd errors. The code below will yield blue links with a white background until the mouse hovers or the link is selected with the keyboard. At that point the text will become white and the background will become blue.
a:link {color: blue; background-color: white;}
a:visited {color: blue; background-color: white;}
a:focus {color: white; background-color: blue;}
a:hover {color: white; background-color: blue;}
a:active {color: white; background-color: blue;}
Full Example
HTML
<div id="hmenufull">
<ul>
<li><a href="https://www.utm.edu/">UTMartin</a></li>
<li><a href="https://www.uark.edu/">University of Arkansas</a></li>
<li><a href="https://www.missouristate.edu/">Missouri State University</a></li>
</ul>
</div>
CSS
#hmenufull ul {list-style-type: none;}
#hmenufull a {text-decoration: none; padding: 5px;}
#hmenufull li {display: inline;}
#hmenufull a:link {color: blue; background-color: white;}
#hmenufull a:visited {color: blue; background-color: white;}
#hmenufull a:focus {color: white; background-color: blue;}
#hmenufull a:hover {color: white; background-color: blue;}
#hmenufull a:active {color: white; background-color: blue;}
Notice the use of descendant selectors in this example.
