We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 51365
    • 1 Posts
    I'm very new to ModX. I have tried my best to create a drop down menu with Wayfinder. Followed the instructions and used built-in drop down menu in Wayfinder. The built-in one worked nicely. I tried to implement my own, but I encountered a problem with Parent-Child relationship. If someone can help me to figure it out, I will be very greatful.
    Here is the code of my drop-down menu css file:
    .menu ul,
    .menu li,
    .menu span,
    .menu a {
      border: 0;
      margin: 0;
      padding: 0;
      position: relative;
    }
    .menu {
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
      box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
      background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
      background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
      font-weight: 600;
      height: 52px;
      width: auto;
    }
    .menu:after,
    .menu ul:after {
      content: '';
      display: block;
      clear: both;
    }
    .menu a {
      box-shadow: inset 0 1px 0 whitesmoke;
      -moz-box-shadow: inset 0 1px 0 whitesmoke;
      -webkit-box-shadow: inset 0 1px 0 whitesmoke;
      background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
      background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
      background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
      background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
      color: #666666;
      display: inline-block;
      font-family: Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height: 52px;
      padding: 0 28px;
      text-decoration: none;
    }
    .menu ul {
      list-style: none;
      box-shadow: inset 0 1px 0 whitesmoke;
      -moz-box-shadow: inset 0 1px 0 whitesmoke;
      -webkit-box-shadow: inset 0 1px 0 whitesmoke;
    }
    .menu > ul {
      float: left;
    }
    .menu > ul > li {
      float: left;
    }
    .menu > ul > li:first-child a {
      border-radius: 5px 0 0 5px;
      -moz-border-radius: 5px 0 0 5px;
      -webkit-border-radius: 5px 0 0 5px;
    }
    .menu > ul > li.active a,
    .menu > ul > li:hover > a {
      box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
      color: white;
      background: #4a5662 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);
      background: -moz-linear-gradient(top, #4a5662 0%, #606f7f 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5662), color-stop(100%, #606f7f));
      background: -webkit-linear-gradient(top, #4a5662 0%, #606f7f 100%);
      background: -o-linear-gradient(top, #4a5662 0%, #606f7f 100%);
      background: -ms-linear-gradient(top, #4a5662 0%, #606f7f 100%);
      background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
    }
    .menu .has-sub {
      z-index: 1;
    }
    .menu .has-sub:hover > ul {
      display: block;
    }
    .menu .has-sub ul {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      display: none;
      position: absolute;
      width: 200px;
      top: 100%;
      left: 0;
    }
    .menu .has-sub ul li a {
      background: #606f7f;
      border-bottom: 1px solid #59636f;
      border-bottom: 1px solid #556371;
      box-shadow: inset 0 1px 0 #606f7f;
      -moz-box-shadow: inset 0 1px 0 #606f7f;
      -webkit-box-shadow: inset 0 1px 0 #606f7f;
      color: white;
      display: block;
      line-height: 160%;
      padding: 15px 10px;
      font-size: 12px;
    }
    .menu .has-sub ul li:hover a {
      background: #4a5662;
      box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }
    .menu .has-sub .has-sub:hover > ul {
      display: block;
    }
    .menu .has-sub .has-sub ul {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
    }
    .menu .has-sub .has-sub ul li a {
      background: #606f7f;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
    }
    .menu .has-sub .has-sub ul li a:hover {
      background: #4a5662;
      box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }
    


    The screenshot of how the menu looks like is in the attached file... The 2nd row (i.e. children tabs) do not work as well. I'm totally confused... What is supposed to be done?

    Thank you very much in advance!
    • try to define higher z-index on the menu, and lower z-index for the slideshow
        Rico
        Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
        MODx is great, but knowing how to use it well makes it perfect!

        www.virtudraft.com

        Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

        Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

        Maintainter/contributor of Babel

        Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.