The code for this page creates menus from lists by removing their bullets (list-style-type:none;) and floating the (li) list items to line them up horizontally with anchor links as fixed-width blocks. Each menu is within a "div" block of the class "hnav." I called the style class "hnav" for "horizontal navigation." The demonstration menu at the top of the page is linked to more menu tutorials. A second menu at the bottom of the page demonstrates that you can reuse the class with a different set of links.
Hover your mouse over either menu to see the "block" background color-change effect. Compare it with hovering the mouse over the other links at the bottom of the page.
The CSS rules for the divs (and their contents) add background colors, style the link-anchor tags, and treat the link anchors as "blocks" instead of simple inline strings of characters. There also are settings for padding, width and more. Save a copy or use "view source" to inspect the code.Viewed without the CSS, each menu would be a simple bulleted (ul) list. The page turns those lists into menus by wrapping them in a div of the class "hnav" and adding style rules that affect only lists and anchor tags of that class. (See the <styles> block for .hnav ul, .hnav li, .hnav a, etc.)
Lists elsewhere on the page -- including the one below this paragraph -- will have normal "default" bullet-list styling. Similarly, the page uses CSS to modify the styling of the "A" anchor tags only when they are in the "hnav" section.
Notice the normal bullet list below, and that its links behave normally when you mouse over them.
See a simpler example toward the end of w3schools' navigation bar how-to page, under the heading "Floating list items"