Using list in a nav bar

This can be placed inside the navigation section. Padding can be increased or decreased as needed.

Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).

Note: default unordered list

A list with or without links or images can be used anywhere in a webpage. This one would be typical for using in a vertical navigation section.

Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.

<!DOCTYPE html>

<html>

<head>

<style>

body { font-size: 1.2em; background: #D3D3D3 }

content {margin:100px 100px 10px 100px; display:block; width:auto; height: auto; border: none; background: transparent; padding:10px;}

nav {top:0px; left:1px; width: 100%; height:80px; position:fixed; padding: 4px; text-align: left; font-size: 20px; font-weight:bold; color: black; background: DodgerBlue;}

nav a:visited, nav a {height:80px; margin:0 auto; border-top:1px solid #000000; border-bottom:1px solid #000; text-align: left; text-decoration:none; line-height:20px; color: black;}

nav a:hover {background:#aaa; color:#fff;}

ul.a { list-style-type: none; /* default */ list-style-position: outside; /* default */ }

ul.a li { display: inline; margin-left: -20px; padding: 20px 20px 20px 0; }

ul.b { list-style-position: outside; /* default */ }

</style>

</head>

<body>

<content>

<h1>Using list in a nav bar</h1>

<h3>This can be placed inside the navigation section. Padding can be increased or decreased as needed.</h2> <ul class="a">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li>
<li>URL or icon</li>
</ul>

<p>Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).

<h2>Note: default unordered list</h2>

<p> A list with or without links or images can be used anywhere in a webpage. This one would be typical for using in a vertical navigation section. <ul class="b">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li>
<li>URL or icon or . . . . </li>
</ul>

</content>

<nav>

<ul class="a">
<li><img src= "jfa.ico" width= "30px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li>
<li><a href= "index.html">Index</a></li>
</ul>

</nav>

</body>

</html>