Dropdown menu style: columns

Custom look of dropdown menu - columns. Every menu item (li) has the unique class of the module it opens.  For example eshop module will be: .mpIt240.  "mp" is the prefix for menu class'es and "It240" is the main class of the module (see the table of class'es here).
The class near it (see the picture below) i.e. mpId27 is the unique class of this menu item (not the module) it represents the menu button itself.

Copy/paste the code below into corresponding fields:

 Custom CSS

/************************/
/*DROPDOWN MENU IN COLUMNS - DEMO SETINGS. .mpIt240 - is a unique class of menu button for module. */
/***********************/
                                   
/*WARNING - no support for IE9 and lower*/

ul.tmenu li.mpIt240.ovr ul {height: auto; left: 50%; margin-left: -600px; position: fixed;  width: 1200px;  padding: 20px 0;}
ul.tmenu li.havechild.mpIt240.ovr ul {-moz-columns: 4 280px; -webkit-columns: 4 280px; columns: 4 280px; box-sizing:border-box; }
ul.tmenu li.mpIt240.ovr ul li { height: auto; margin: 0; padding: 0; width: auto; /*border: 1px solid;*/} 
ul.tmenu li.mpIt240:hover ul li a, ul.tmenu li.havechild:hover ul li a, ul.tmenu li.ovr ul li a, ul.tmenu li.ovr ul li a:hover  {width:100%; display: inline-block; height: 30px; vertical-align: top; box-sizing:border-box;}
ul.tmenu li.havechild.mpIt240.ovr ul li.havesubchild.sub ul {height:auto !important;}
ul.tmenu li.mpIt240.ovr ul li ul {padding:0;}
ul.tmenu li.havechild.mpIt240.ovr ul li a {font-size:14px !important; font-weight:normal !important; white-space:nowrap; line-height: 20px; overflow:hidden; text-overflow: ellipsis;}
/*3level*/     
ul.tmenu li.ovr ul li ul li {}   
ul.tmenu li.havechild.mpIt240.ovr ul li.havesubchild.sub ul {display: block !important; margin-left: 0 !important;  margin-top: 0 !important; border:none; left:auto; margin:auto; padding:auto; width:auto; display:auto; position: relative; -moz-columns:auto; -webkit-columns: auto; columns: auto; padding-left:10px;}
ul.tmenu li.havechild.mpIt240.ovr ul li ul li a {font-size:11px !important;  font-weight:normal !important; text-transform:capitalize;}
ul.tmenu li.havechild.mpIt240.ovr ul li ul li a:hover {font-size:11px !important;  font-weight:normal !important; text-transform:capitalize;}   
ul.tmenu li.havechild.mpIt240.ovr ul li ul:hover{}
 

 
Custom JS

/* no code here */
 

HEAD tag

/* no code here */