After custom css sub menus are not accessible

After adding some custom css with the jet pack plugin users can't click "my courses" and "my profile" . When you hover over dashboard you can see them but when you go to click on them they disappear.

  • ryan_murphy

    /*
    Welcome to Custom CSS!

    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.

    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don't need to copy all
    your theme's stylesheet content.
    */
    .site-header {
    border-bottom: 1px solid #c9ced2;
    padding: 20px 0 10px;
    }

    .main-navigation ul {
    list-style: none;
    margin: 25px;
    padding-left: 0;
    float: right;
    text-align: right;
    }

    .main-navigation a {
    display: block;
    text-decoration: none;
    color: #666;
    line-height: 26px;
    }

    .main-navigation .menu-item-cp-dashboard {
    background: url("wp-content/uploads/2015/01/dashboard.png")no-repeat scroll left bottom transparent;
    padding-left: 30px;
    }

    .main-navigation .menu-item-cp-logout {
    background: url("wp-content/uploads/2015/01/logout.png") no-repeat scroll left bottom transparent;
    padding-left: 26px;
    }

    .menu-item-cp-courses {
    display: none !important;
    }

    .entry-header {
    display: none !important;
    }

    .course-list .h1-title {
    border-bottom: 2px solid #800000;
    clear: both;
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 0;
    }

    h1 {
    font-size: 60px !important;
    font-family: "Times New Roman", Georgia, Serif !important;
    }

    h1, h2, h3, h4, h5, h6, body {
    color: #595757 !important;
    }

    .apply-button, .apply-button-enrolled, .apply-button-not-started, a.apply-button-enrolled, #student-settings input[type="submit"].apply-button-enrolled, #modules_form input[type="submit"].apply-button-enrolled, #contact_form input[type="submit"].apply-button-enrolled, .apply-box input[type="submit"].apply-button, .apply-box a.apply-button {
    background-color: #2c89a0;
    background: #2c89a0;
    }

    .entry-content-excerpt .quick-course-info {
    border-top: 2px solid #800000;
    padding-top: 20px;
    float: left;
    width: 100%;
    position: absolute;
    bottom: 0;
    }

    .h1-about-course, .h2-instructor-bio {
    border-bottom: 2px solid #565656;
    margin-top: 40px;
    margin-bottom: 20px;
    clear: both;
    font-size: 30px;
    }

    .h1-instructors {
    border-bottom: 2px solid #800000;
    margin-top: 40px;
    margin-bottom: 20px;
    clear: both;
    }

    #instructor-profiles h3.ui-state-active {
    background-color: #2c89a0;
    font-weight: 300;
    font-size: 24px;
    width: 100%;
    padding: 5px 0 7px;
    text-align: center;
    color: #fff !important;
    cursor: default;
    }

    #instructor-profiles a.full-instructor-profile {
    background-color: #2c89a0;
    font-weight: 300;
    font-size: 24px;
    width: 100%;
    padding: 5px 0 7px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    display: block;
    }

    .site-footer {
    background: #f2f6f8;
    border-top: 1px #800000 solid;
    padding-top: 25px;
    padding-bottom: 10px;
    }

    .instructors-content {
    padding-bottom: 10px;
    color: #800000;
    font-size: 16px;
    }

    .type-course .instructors-content, .instructors-content a, a.course-name-content, .type-course .instructors-content, .instructors-content a:visited, a.course-name-content:visited {
    color: #800000;
    font-size: 16px;
    padding-bottom: 10px;
    }

    li.submenu-active a, li.submenu-item a:hover {
    color: #2C89A0;
    text-decoration: none;
    }

    .submenu-main-container {
    border-bottom: 2px solid #2C89A0;
    float: left;
    width: 100%;
    margin-top: 20px;
    }

    element {
    width: 39px;
    height: 23px;
    position: absolute;
    vertical-align: middle;
    margin-top: 23px;
    margin-left: -54px;
    border: 0 none;
    background: none repeat scroll 0 0 transparent;
    font: bold 14px Arial;
    text-align: center;
    color: #800000;
    padding: 0;
    }

  • Adam Czajczyk

    Hey Ryan,

    Thank you for sharing this code with me. It gave me a clue on where to look for an issue. I've examined your site once again and here's what I've come with.

    The sub-menu is way below the bottom border (thus the border is invisible) of the main menu elements. Therefore the problem is that it's not possible to keep hovering the cursor over it when moving from main- to sub-menu item.

    Quickest workaround would be to add another custom CSS rule to your custom style:

    .main-navigation ul ul {
    top:-20px!important;
    }

    This will move your sub-menu a bit higher and should make it work. It does on my tests.

    Let me know please if it helped!

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.