Adding CSS to Edit Menu functionality

Hi Wesley

Thanks for your support.

Something like this is unfortunately more in the custom development category than regular support. We can try point you in the right direction though.

The CSS for this demo that would go under Appearance > Custom CSS is:

* 									{ margin: 0; padding: 0; }
body								{ font: 15px Helvetica, Sans-Serif; } 
html                                { overflow-y: scroll; }
#page-wrap							{ width: 720px; margin: 25px auto; } 
p                                   { margin: 0 0 8px 0; }
a									{ text-decoration: none; }
img                                 { vertical-align: middle; }
a img                               { border: 0; 180}
ul									{ list-style: none; }
h1                                  { margin: 0 0 10px 0; }
/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; width: 100%; }
ul.dropdown li                      { font-weight: bold; float: left; width: 180px; background: #ccc; position: relative; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown li a                    { display: block; padding: 20px 8px; color: #222; position: relative; z-index: 2000; }
ul.dropdown li a:hover,
ul.dropdown li a.hover              { background: #F3D673; position: relative; }
/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; }
ul.dropdown ul li a					{ display: block; background: #eee !important; } 
ul.dropdown ul li a:hover			{ display: block; background: #F3D673 !important; }

However there isn’t any .dropdown class in our menu so you’d need to change all references that say .dropdown to .menu

You could then use a plugin like this: https://wordpress.org/plugins/header-and-footer-scripts/ to insert the Javascript into your header:

var maxHeight = 400;
$(function(){
    $(".dropdown > li").hover(function() {
         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller
        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");
        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }
    }, function() {
        var $el = $(this);
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");
    });
    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });
    
});

But again, you need to change all .dropdown references to .menu.

I haven’t tested this but there is a chance this might not work with the existing menu functionality in Vantage or with the Vantage mobile menu.

http://codeable.io/ would be our recommendation if you’d like a quote to get developer assistance with a task like this.