TotallyInformation/index.html

## index.html
<!doctype html>
<html lang="en"><head>
    <meta charset="utf-8">
    <title>Web Component Test: nav-bar</title>

    <script type="module" async >
        import './nav-bar.js'
    </script>

</head><body>
    <nav-bar></nav-bar>

    <h1>Demonstrating Web Components</h1>
    <p>
        This is some demo text.
    </p>

</body></html>

## nav-bar.js

// https://www.makeuseof.com/responsive-navigation-bar-using-html-and-css/
const myHtml = `
    <style>
        :host {
            /* display: block;   default is inline */
            /* contain: content; performance boost */
            box-sizing: border-box;
            /* position: relative; */
            width: 100%;
            background-color: black;
            color: white;
            padding: 0;
            margin: 0 0 0.8rem 0;
            /* border: 2px solid silver; */
        }
        nav {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            overflow-x: auto;
            background-color: black;
        }
        nav * {
            /* display: block; */
            margin: .1rem;
        }
        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        li {
            display: inline-block;
        }
        li:hover a {
            color: white;
        }
        a {
            text-decoration: none;
            color: white;
        }
        ul ul {
            display: none;
        }

        .site-menu {
            order: 0;
            flex: 1 1 auto;
            align-self: auto;
        }
        .has-sub-menu:hover {
            position: relative;
            z-index: 10;

        }
        .has-sub-menu:hover ul {
            /* display: initial; */
            display: block;
            background-color: blue;
            position: absolute;
            top: 1em;
            left: 1em;
            z-index: 20;
        }
        .has-sub-menu:hover ul li {
            display: block;
            z-index: 30;
        }

    </style>
    <nav>
        <ul class="site-menu">
            <li><a href="/">Home</a></li>
            <li><a href="/">About</a></li>
            <li class="has-sub-menu">
                <a href="/">Services</a>
                <ul class="site-sub-menu">
                    <li><a href="/">Dropdown 1 </a></li>
                    <li><a href="/">Dropdown 2</a></li>
                    <li><a href="/">Dropdown 2</a></li>
                    <li><a href="/">Dropdown 3</a></li>
                    <li><a href="/">Dropdown 4</a></li>
                </ul>
            </li>
            <li><a href="/">Pricing</a></li>

            <li class="button"><a href="#">Log In</a></li>
            <li class="button secondary"><a href="#">Sign Up</a></li>

        </ul>
    </nav>
`
const template = document.createElement('template')
template.innerHTML = myHtml


export default class NavBar extends HTMLElement {

    constructor() {

        super()
        //this.attachShadow({ mode: 'open', delegatesFocus: true })
        //    .append(template.content.cloneNode(true))

        // this.append(template.content.cloneNode(true))
        //this.innerHtml = myHtml

    } // ---- end of constructor ----

} // ---- end of Class ---- //

// Self-register the HTML tag
customElements.define('nav-bar', NavBar)
	<!doctype html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<title>Web Component Test: nav-bar</title>

	<script type="module" async >
	import './nav-bar.js'
	</script>

	</head><body>
	<nav-bar></nav-bar>

	<h1>Demonstrating Web Components</h1>
	<p>
	This is some demo text.
	</p>

	</body></html>