Horizontal Navigation Bar with Unordered List

Web pages in recent years have placed navigation links within unordered lists. Placing them within a list apparently makes them more accessible to people with disabilities.

But if you use this technique, you don't want to see bullet points, as you typically would in an unordered list. As shown in this page, one can get rid of the bullet points by applying the CSS property and value of list-style-type:none to the li tag. But one wants to limit this to only where links are placed within the unordered list. To do this, one uses contextual or descendant CSS approach to limit the CSS effect to just the navigation bar.

Since li is a block level element, bullet points display on their own line. But this default behavor can be overridden by specifying display: inline; and again confining this override to where links are placed within the unordered list.

Contextual or descendant CSS is also used with respect to underlining of links. It is turned off in the navigation area of the page and within this area of the page, hovering over the link will display the underlining.

Revised: February 15, 2023