First choose a Theme for your menu. In this readme we'll use "configurable".
Go to Design / Library / Layouts / Multi Column Menu / configurable.
Look for:
Code: Select all
ul#topnav li {
float: left;
Code: Select all
ul#topnav li {
float: none;
width: 150px;
Code: Select all
ul#topnav li a {
float: left;
Code: Select all
ul#topnav li a {
float: none;
Code: Select all
ul#topnav li .sub {
position: absolute;
top: 27px; left: 0;
Code: Select all
ul#topnav li .sub {
position: absolute;
top: 0px; left: 150px;
Another change that may be needed is to go to Settings / Site Options / Layout / Multi Column Menu and set MenuInsideId to the ID of a DIV that is wide enough to contain the expanded menu. Usually a DIV that's the width of your page content area works well.
Edit file multicolumnmenu.js (in your Site folder) and look for the line:
Code: Select all
$(this).hide().css('left', '0'); // Drillpine reset left
Code: Select all
// $(this).hide().css('left', '0'); // Drillpine reset left