CSS Variables

Use a css variable to change a style property

HTML

<body bgcolor="#dddddd">
		<ul id="VertMenu">
			<li><a href="#">Item 1</a></li>
			<li>
				<a href="#">Item 2</a>
				<ul class="sub">
					<li><a href="vertical-menu#1">Vertical Menu</a></li>
					<li><a href="vertical-menu#2">Vertical Menus</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Item 3</a>
				<ul class="sub">
					<li><a href="#">Sub Item 3.1</a></li>
					<li><a href="#">Sub Item 3.2</a></li>
					<li><a href="#">Sub Item 3.3</a></li>
					<li><a href="#">Sub Item 3.4</a></li>
					<li><a href="#">Sub Item 3.5</a></li>
				</ul>
			</li>
			<li><a href="#">Item 4</a></li>
			<li>
				<a href="#">Item 5</a>
				<ul class="sub">
					<li><a href="#">Sub Item 5.1</a></li>
					<li>
						<a href="#">Sub Item 5.2</a>
						<ul class="sub">
							<li><a href="#521">Vertical Menu 5.2.1</a></li>
							<li><a href="#522">Vertical Menu 5.2.2</a></li>
							<li><a href="#523">Vertical Menu 5.2.3</a></li>
							<li><a href="#524">Vertical Menu 5.2.4</a></li>
							<li><a href="#525">Vertical Menu 5.2.5</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Sub Item 5.3</a>
						<ul class="sub">
							<li><a href="#">Sub Item 5.3.1</a></li>
							<li><a href="#">Sub Item 5.3.2</a></li>
							<li><a href="#">Sub Item 5.3.3</a></li>
							<li><a href="#">Sub Item 5.3.4</a></li>
							<li><a href="#">Sub Item 5.3.5</a></li>
							<li><a href="#">Sub Item 5.3.6</a></li>
							<li><a href="#537">Vertical Menus 5.3.7</a></li>
							<li><a href="#538">Vertical Menus 5.3.8</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Item 6</a></li>
		</ul>
	</body>

CSS

:root {
			--LeftSide: 50;
			}
			#VertMenu li, #VertMenu a {zoom:1;} /* Hacks for IE6, IE7 */
			#VertMenu
			{
			width: 180px; /* Main Menu Item widths */
			border: 1px solid #ccc;
			border-top:none;
			position: relative;
			font-size:0;
			list-style: none;
			padding: 0;
			display:block;
			margin-left: calc(var(--LeftSide) * 1px);
			margin-top: 40px!important;
			z-index:9;
			}
			#VertMenu ul
			{
			width: 180px; /* Main Menu Item widths */
			border: 1px solid #ccc;
			border-top:none;
			position: relative;
			font-size:0;
			list-style: none;
			padding: 0;
			display:block;
			margin: 0;
			z-index:9;
			}
			/* Top level menu links style
			---------------------------------------*/
			#VertMenu li
			{
			background: #FFF url(bg.gif) repeat-x 0 2px;
			list-style: none; margin: 0; padding: 0;
			}
			#VertMenu li a
			{
			font: normal 12px Arial;
			border-top: 1px solid #ccc;
			display: block;
			/*overflow: auto; force hasLayout in IE7 */
			color: black;
			text-decoration: none;
			line-height:26px;
			padding-left:26px;
			}
			#VertMenu ul li a
			{
			line-height:30px;
			}
			#VertMenu li a.arrow:hover
			{
			background-image:url(arrowon.gif);
			background-repeat: no-repeat;
			background-position: 97% 50%;
			}
			/*Sub level menu items
			---------------------------------------*/
			#VertMenu li ul
			{
			position: absolute;
			width: 200px; /*Sub Menu Items width */
			visibility:hidden;
			}
			#VertMenu a.arrow
			{
			background-image:url(arrow.gif);
			background-repeat: no-repeat;
			background-position: 97% 50%;
			}
			#VertMenu li:hover, #VertMenu li.onhover
			{
			background-position:0 -62px;
			}
			#VertMenu ul li
			{
			background: rgba(255, 255, 255, 0.86);
			background-image:none;
			}
			#VertMenu ul li:hover, #VertMenu ul li.onhover
			{
			background: #FFF;
			background-image:none;
			}

JavaScript

var alignWithMainMenu=false;

			/* Vertical Menu - Developed by http://www.MenuCool.com/vertical/vertical-menu. Retaining this comment is required.*/
			function initmenu(){
      console.log(4);
			document.getElementById("VertMenu").style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));

			var e = document.getElementById("menuV2");
			var i = e.offsetHeight;
			var b = e.getElementsByTagName("ul");
			var g = /msie|MSIE 6/.test(navigator.userAgent);
			if(g) {
			for(var h = e.getElementsByTagName("li"), a = 0, j = h.length; a < j; a++) {
				h[a].onmouseover = function(){
					this.className = "onhover";
				};
				h[a].onmouseout = function(){
					this.className = "";
				};
			}
			}


			for(var a = 0; a < b.length; a++){
			var c = b[a].parentNode;
			c.getElementsByTagName("a")[0].className += " arrow";
			b[a].style.left = c.offsetWidth+"px";
			b[a].style.top = c.offsetTop+"px";

			if(alignWithMainMenu){
				var d = getParentOffsetRoot(c.parentNode, 0);
				if(b[a].offsetTop+b[a].offsetHeight+d>i) {
					var f;
					if(b[a].offsetHeight>i) {
						f = -d;
					} else {
						f = i - b[a].offsetHeight - d;
						b[a].style.top=f+"px";
					}
				}
			}

			c.onmouseover = function() {
				if(g) {
					this.className = "onhover";
				}
				var a = this.getElementsByTagName("ul")[0];
				if(a) {
					a.style.visibility = "visible";
					a.style.display = "block";
				}

			};

			c.onmouseout = function() {
				if(g) {
					this.className = "";
				}
				this.getElementsByTagName("ul")[0].style.visibility = "hidden";
				this.getElementsByTagName("ul")[0].style.display = "none";
			};

			}

			for(var a=b.length-1;a>-1;a--) {
			b[a].style.display="none";
			}
			}

			function getParentOffsetRoot(a, b) {
			if(a.id == "menuV2") {
			return b;
			} else {
			b += a.offsetTop;
			return getParentOffsetRoot(a.parentNode.parentNode, b);
			}
			}

			if(window.addEventListener) {
			window.addEventListener("load", initmenu,...