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.

Additional CSS, also limited to this area of the page: text-decoration:none means that the links in the navigation bar will have no underlining. and the a:hover will show underlining when you mouseover the links in the navigation bar

Revised: September 30, 2019