krtenn/main.html

## main.html
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div class="menu">
<ul class="main-ul">
<li class="main-li">
Tools
<ul class="dropdown-content">
	<p>Our selection of tools to get the job done, no matter what your project is</p>
	<ul>
		<li>Power Tools</li>
		<li>Regular Tools</li>
		<li>Screws and Nails</li>
	</ul>
</ul>
</li>
<li class="main-li">
Cars
<ul class="dropdown-content">
	<p>This is our selection of cool compact cars.</p>
	<ul>
<li>
Dodge
</li>
<li>
Ford
</li>
<li>
Chevy
</li>
<li>
Honda
</li>
<li>
Nissan
</li>
<li>Volkswagen</li>
<li>Range Rover</li>
<li>Lexus</li>
<li>Other Unique Foreign and Domestic Vehicles</li>
<li>Antiques</li>
</ul>
</ul>
</li>
</ul>
</div>
<p>This is the page now. This change should be commited to git.</p>
</body>
<script src="menu.js"></script>
</html>

## menu.css
@import url('https://fonts.googleapis.com/css?family=Lato');

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}

body {
	font-family: 'Lato', sans-serif;
}
.menu {
	background: grey;
	padding: 10px;
	border-radius: 10px;
	font-size: 22px;
}
/* this is the main structure for the list - can remove */
.main-ul {
	border: solid yellow 5px;
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
}

/* these are the top menu links that, upon hover, show the dropdown content */
.main-li {
	display: inline-block;
	padding: 10px;
	border: solid 1px;
	border-radius: 5px;
	/* max-width: 5%; */
}

.main-li:hover {
	background-color: darkgrey;
	cursor: pointer;
}
/* this is the nice little drop down menu div type object with the uls
	notice its max width is 30% */

.dropdown-content {
	display: none;
	position: absolute;
	background-color: darkgrey;
	max-width: 35%;
	padding: 10px;
	border-radius: 5px;
}
/* this is a paragraph within the dropdown */
.dropdown-content p {
		font-size: 18px;
		background-color: yellow;
		border-radius: 5px;
		padding: 5px;
	}
/* this is a ul within the dropdown */
.dropdown-content ul {
	columns: 1;
	column-width: 50%;
	padding: 5px 2px 5px 2px;
}


/* this is an li within the dropdown */
.dropdown-content li {
	display: block;
	padding: 5px;
	font-size: 0.8em;
	border-radius: 5px;
	break-inside: avoid;
}

.dropdown-content li:hover {
	background-color: yellow;
	transition: all 0.2s ease-in;
}

.main-li:hover .dropdown-content {
	display: block;
	animation: showNav 250ms ease-in both;
}

## menu.js
var list2 = document.querySelectorAll(".dropdown-content ul");
	for (var i = 0; i < list2.length; i++) {
		var listItems = list2[i].children.length;
				if (listItems > 6) {
					list2[i].style.columns = 2;
					list2[i].style.columnwidth = "50%";
	}

}
	<html>
	<head>
	<title>Testing</title>
	<link rel="stylesheet" href="menu.css">
	</head>
	<body>
	<div class="menu">
	<ul class="main-ul">
	<li class="main-li">
	Tools
	<ul class="dropdown-content">
	<p>Our selection of tools to get the job done, no matter what your project is</p>
	<ul>
	<li>Power Tools</li>
	<li>Regular Tools</li>
	<li>Screws and Nails</li>
	</ul>
	</ul>
	</li>
	<li class="main-li">
	Cars
	<ul class="dropdown-content">
	<p>This is our selection of cool compact cars.</p>
	<ul>
	<li>
	Dodge
	</li>
	<li>
	Ford
	</li>
	<li>
	Chevy
	</li>
	<li>
	Honda
	</li>
	<li>
	Nissan
	</li>
	<li>Volkswagen</li>
	<li>Range Rover</li>
	<li>Lexus</li>
	<li>Other Unique Foreign and Domestic Vehicles</li>
	<li>Antiques</li>
	</ul>
	</ul>
	</li>
	</ul>
	</div>
	<p>This is the page now. This change should be commited to git.</p>
	</body>
	<script src="menu.js"></script>
	</html>