AlanSimpsonMe · April 23, 2018 14:48
diff --git a/ClickableDropDown b/ClickableDropDown

 <!DOCTYPE html>
 <html>
 <head>
    <title>jQuery Dropdowns </title>
    <meta name="description" content="Here is a free and relatively simple clickable dropdown menu for your website that acts more like the menu bars in standard Windows and Mac OS apps, rather than CSS hover menus." />
    <meta name="author" content="Alan Simpson" />
    <!-- Download jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>    
    <script>
        //jQuery code for clickable dropdown menus.
        $(document).ready(function () {
            //Hides all visible dropdown menus.
            function hideall() {
                $('nav ul li ul').hide();
            }

            //When clicking anywhere on the page, hide all dropdown menus.
            $('html').bind("click touchstart", function () {
                hideall()
            });

            //User clicked on a top menu bar item.
            $('nav ul li').click(function (e) {
                //Is dropdown already hidden?
                var hidden = $("ul", this).is(":hidden")
                //Hide all dropdown menus.
                hideall()
                //If it was hidden already, show it.
                if (hidden) {
                    $("ul", this).slideDown("fast");
                }
                //Don't do html.click to hide all menus.
                e.stopPropagation()
            });

            $('a').bind("click touchstart", function (e) {
                e.stopPropagation()
            });
        });
    </script>
    <style>
        /* All elements inside the nav */
        nav * {
            margin: 0;
            padding: 0;
            font-family: Verdana, Tahoma, Sans-Serif;
        }

        /* nav element, size and color however you like */
        nav {
            height: 48px;
            line-height: 48px;
            width: 100%;
            background-color: #146497;
            color: White;
            display: block;
        }
            /* All link in the nav, size and color how you want */
            nav a {
                color: white;
                text-decoration: none;
            }

            /* Horizontal menu  */
            nav ul {
                margin: 0;
                list-style-type: none;
                padding: 0;
            }

                /* Each item on the top horizontal menu */
                nav ul li {
                    float: left;
                    position: relative;
                }

                    /* Text on the horzontal menu */
                    nav ul li span,
                    nav ul li a {
                        display: block;
                        height: 100%;
                        padding: 0 20px;
                    }

                /* Dropdown meny styling, style to taste */
                nav ul ul {
                    margin: 0;
                    padding: 0;
                    display: none;
                    position: absolute;
                    left: 0;
                    width: 200px;
                    background-color: #0c648d;
                    list-style-type: none;
                    z-index: 10;
                }

                /* Dropdown menu items. */
                nav ul li ul li {
                    float: left;
                    position: relative;
                    text-align: left;
                }

            /* Hover color to text across top and items on the dropdown menus */
            nav li span:hover,
            nav li a:hover {
                color: #ff0;
                cursor: pointer;
                background-color: #538cb7;
            }

            /* Hover style for the items on the dropdown menu*/
            nav ul ul span:hover {
                text-decoration: underline;
            }

            nav ul ul li {
                width: 100%;
                margin-left: 0px;
                height: 48px;
            }

            nav ul ul span,
            nav ul ul a {
                display: block;
                color: #f2f2f2;
                padding-left: 1em;
                height: 42px;
                line-height: 42px;
                cursor: pointer;
            }

                nav ul ul span:hover {
                    background-color: #538cb7;
                }
    </style>
 </head>
 <body>
    <h1 style="margin-top:0">Clickable Dropdown Menus</h1>
    <!-- ====================================================================================== Horizontal menu bar -->
    <nav>
        <ul>
            <li><a href="index.html"> Home</a></li>
            <li>
                <span>
                    Top 1
                </span>
                <ul>
                    <li><a href="index.html">Drop 1-1 </a></li>
                    <li><a href="index.html">Drop 1-2 </a></li>
                    <li><a href="index.html">Drop 1-3 </a></li>
                    <li><a href="index.html">Drop 1-4 </a></li>
                </ul>
            </li>
            <li>
                <span>
                    Top 2
                </span>
                <ul>
                    <li><a href="index.html">Drop 2-1 </a></li>
                    <li><a href="index.html">Drop 2-2 </a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <article>
        <p>Sample dropdown menu that works more like traditional Mac and Windows menu. To make the menu drop down, you have to click the item in the menu bar. Clicking anywhere outside the menu closes the menu without making a selection. Uses jQuery.</p>
    </article>
 </body>
 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Dropdowns </title>
	<meta name="description" content="Here is a free and relatively simple clickable dropdown menu for your website that acts more like the menu bars in standard Windows and Mac OS apps, rather than CSS hover menus." />
	<meta name="author" content="Alan Simpson" />
	<!-- Download jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script>
	//jQuery code for clickable dropdown menus.
	$(document).ready(function () {
	//Hides all visible dropdown menus.
	function hideall() {
	$('nav ul li ul').hide();
	}

	//When clicking anywhere on the page, hide all dropdown menus.
	$('html').bind("click touchstart", function () {
	hideall()
	});

	//User clicked on a top menu bar item.
	$('nav ul li').click(function (e) {
	//Is dropdown already hidden?
	var hidden = $("ul", this).is(":hidden")
	//Hide all dropdown menus.
	hideall()
	//If it was hidden already, show it.
	if (hidden) {
	$("ul", this).slideDown("fast");
	}
	//Don't do html.click to hide all menus.
	e.stopPropagation()
	});

	$('a').bind("click touchstart", function (e) {
	e.stopPropagation()
	});
	});
	</script>
	<style>
	/* All elements inside the nav */
	nav * {
	margin: 0;
	padding: 0;
	font-family: Verdana, Tahoma, Sans-Serif;
	}

	/* nav element, size and color however you like */
	nav {
	height: 48px;
	line-height: 48px;
	width: 100%;
	background-color: #146497;
	color: White;
	display: block;
	}
	/* All link in the nav, size and color how you want */
	nav a {
	color: white;
	text-decoration: none;
	}

	/* Horizontal menu */
	nav ul {
	margin: 0;
	list-style-type: none;
	padding: 0;
	}

	/* Each item on the top horizontal menu */
	nav ul li {
	float: left;
	position: relative;
	}

	/* Text on the horzontal menu */
	nav ul li span,
	nav ul li a {
	display: block;
	height: 100%;
	padding: 0 20px;
	}

	/* Dropdown meny styling, style to taste */
	nav ul ul {
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	left: 0;
	width: 200px;
	background-color: #0c648d;
	list-style-type: none;
	z-index: 10;
	}

	/* Dropdown menu items. */
	nav ul li ul li {
	float: left;
	position: relative;
	text-align: left;
	}

	/* Hover color to text across top and items on the dropdown menus */
	nav li span:hover,
	nav li a:hover {
	color: #ff0;
	cursor: pointer;
	background-color: #538cb7;
	}

	/* Hover style for the items on the dropdown menu*/
	nav ul ul span:hover {
	text-decoration: underline;
	}

	nav ul ul li {
	width: 100%;
	margin-left: 0px;
	height: 48px;
	}

	nav ul ul span,
	nav ul ul a {
	display: block;
	color: #f2f2f2;
	padding-left: 1em;
	height: 42px;
	line-height: 42px;
	cursor: pointer;
	}

	nav ul ul span:hover {
	background-color: #538cb7;
	}
	</style>
	</head>
	<body>
	<h1 style="margin-top:0">Clickable Dropdown Menus</h1>
	<!-- ====================================================================================== Horizontal menu bar -->
	<nav>
	<ul>
	<li><a href="index.html"> Home</a></li>
	<li>
	<span>
	Top 1
	</span>
	<ul>
	<li><a href="index.html">Drop 1-1 </a></li>
	<li><a href="index.html">Drop 1-2 </a></li>
	<li><a href="index.html">Drop 1-3 </a></li>
	<li><a href="index.html">Drop 1-4 </a></li>
	</ul>
	</li>
	<li>
	<span>
	Top 2
	</span>
	<ul>
	<li><a href="index.html">Drop 2-1 </a></li>
	<li><a href="index.html">Drop 2-2 </a></li>
	</ul>
	</li>
	</ul>
	</nav>
	<article>
	<p>Sample dropdown menu that works more like traditional Mac and Windows menu. To make the menu drop down, you have to click the item in the menu bar. Clicking anywhere outside the menu closes the menu without making a selection. Uses jQuery.</p>
	</article>
	</body>
	</html>