Web Hosting
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix Hover doesnt cover it all

Discussion in 'Misc WordPress Requests' started by swtscp, Nov 28, 2017.

  1. swtscp

    Guest

    Hover doesnt cover it all, by swtscp

    .main-navigation {
    display: block;
    float: left;
    margin: 0 auto;
    max-height: 64px;
    position: relative;
    }
    ul.nav-container,
    .nav-container > ul {
    margin: 0;
    padding: 0 20px 0 0;
    }
    .nx-no-search ul.nav-container,
    .nx-no-search .nav-container > ul {
    padding: 0px;
    }
    .nav-container li {
    display: inline-block;
    position: relative;
    padding: 0px 0px;
    margin-top:-5px;
    }
    .nav-container li a {
    height:64px;
    color: #545454;
    display: block;
    /*line-height: 1;*/
    padding: 20px 20px;
    text-decoration: none;
    position: relative;
    margin-top:5px;
    }
    .nav-container ul ul li {
    padding: 0px;
    }
    .nav-container ul ul li a {
    padding: 15px 20px;
    }
    .nav-container .current_page_item > a,
    .nav-container .current_page_ancestor > a,
    .nav-container .current-menu-item > a,
    .nav-container .current-menu-ancestor > a,
    .nav-container li a:hover {
    color: #FFFFFF;
    background-color: #dd3333;
    }
    .nav-container li:hover > a,
    .nav-container li a:hover {
    color: #FFFFFF;
    background-color: #dd3333;
    }

    /* variable color */
    .nav-container .sub-menu,
    .nav-container .children {
    background-color: #FFFFFF;
    border-top: 2px solid #dd3333; /* variable color */
    display: none;
    padding: 0;
    position: absolute;
    left: 0px;
    z-index: 1002;
    /*top: 64px;*/

    -webkit-box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.06);
    box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.06);

    }
    .nav-container .sub-menu ul,
    .nav-container .children ul {
    border-left: 0;
    left: 100%;
    top: 0px;
    margin-top: -2px;
    }
    .nav-container li:last-child .sub-menu ul,
    .nav-container li:last-child .children ul {
    left: 0%;
    right: auto;
    width: 200px;
    margin-left: -200px;
    top: 0px;
    margin-top: -2px;
    }
    ul.nav-container ul a,
    .nav-container ul ul a {
    margin: 0;
    width: 200px;
    border-top: 1px solid #e7e7e7;
    padding: 10px 16px;
    }
    ul.nav-container ul li:first-child a,
    .nav-container ul ul li:first-child a {
    border: none;
    }
    ul.nav-container ul a:hover,
    .nav-container ul ul a:hover {
    color: #FFF;
    background-color: #dd3333;
    }

    https://linustechtips.com/main/uplo...mage.png.a38f7ce6e71e9337510b9261e1a8d64f.png

    do you guys know know how to fix this?

    Hover doesnt cover it all
     
    #1

Share This Page

Web Hosting