Support » Plugin: JQuery Mega Menu Widget » Main Menu Item changes width when hovered on submenu item

  • Mentioned below is my menu code. Please help!

    My main menu item changes width when hovered on submenu.

    /* #categroy menu */
    /*
    #catnav{
    background: #353535;
    margin: 0;
    font-size: 16px;
    min-height: 35px;
    position: relative;
    white-space:nowrap;
    width:auto;
    }

    #catnav.secondary{
    background: #333;
    border-top-right-radius: 2px;
    margin-bottom: 5px;
    border-top-left-radius: 2px;
    width:auto;
    }

    #catnav ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    line-height: 1;
    border-bottom: 0;
    text-align: center;
    width:auto;
    }

    #catnav ul a {
    position: relative;
    white-space:nowrap;
    display: block;
    padding: 0 18px;
    height: 35px;
    line-height: 38px;
    color: #fff;
    text-transform:uppercase;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width:auto;
    }

    #catnav.secondary ul a{height: 48px;
    color: white;
    line-height: 48px;
    font-family: Oswald,serif;
    font-size: 14px;
    width:auto;}

    #catnav ul li{
    float: left;
    position: relative;
    width: auto;
    transition: all .3s;
    -ms-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    }

    #catnav ul li.dropme a{background:#0198E1;width:280px;font-size:14px;}

    #catnav > .sub-menu{margin-left:0;width:auto;}
    #catnav ul li:first-child {width:auto;};
    #maganav ul a{border-right:none;}
    #catnav ul li.current-menu-item a{color: #fff;width:auto;}
    ul.catnav li a{padding:5px 10px;width:280px;}
    #catnav ul li.current-menu-item {width:auto;}
    #catnav >ul >li a:hover {color: #fff;background:#0198E1;width:auto;}
    #catnav >ul >ul a:hover {color: #fff;background:#0198E1;width:auto;}

    #catnav.secondary ul li.current-menu-item, #catnav.secondary >ul >li a:hover {background:#0198E1;width:auto;}

    #catnav ul ul {position: absolute;left: -999em; width:280px;z-index:99999;border:0;border-bottom: 1px solid #222;margin-left:-1px;background: none;border-bottom: none;}
    #catnav ul ul a {
    width:280px;
    background-color: #202326;
    height: 15px;
    line-height: 15px;
    padding: 15px 0px 10px 15px;
    overflow: hidden;
    text-align: left;
    border-right: none;}
    #catnav.secondary ul ul a{padding: 0px 0px 2px 15px;width:280px;}

    #catnav .catnav ul {width:280px;}
    #catnav ul ul a:hover {background-color: #333!important;width:280px;}
    #catnav ul ul ul {border-top:0;margin: -44px 0 0;width:300px;position:absolute;}
    #catnav ul li li { margin:0;border:0;background-color: #333;width:300px;}
    #catnav ul li:hover ul.submenu {position:absolute;}
    #catnav ul li:hover ul ul {width:280px;}, #catnav ul li:hover ul ul ul, #catnav ul li:hover ul ul ul ul { left:-999em;}
    #catnav ul li:hover ul, #catnav ul li li:hover ul,#catnav ul li li li:hover ul,#catnav ul li li li li:hover ul { left:auto;width:280px;}

    #notifybrowser{padding:30px;background:#eee;border:1px solid #ddd;}
    .fluid_container {
    float:left;margin:30px 0;position: relative;z-index: 1;background: #fff;width:100%;height:360px;
    } /*

    https://wordpress.org/plugins/jquery-mega-menu/

  • The topic ‘Main Menu Item changes width when hovered on submenu item’ is closed to new replies.