#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    2
    Rep Power
    0

    Css menu highlighting help


    I have a menu that when you hover over an item highlights the item. But when I hover over a child item I would like the parent to stay highlighted.

    This is the pertinent css:
    /* Navigation */
    #navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important}
    #navbar { height: 55px; }
    #navbar.row { margin-bottom: 0 }
    #navigation { padding:0 10px;}
    #navigation ul.menu { float:right}
    #navigation .menu { margin: 0; padding: 0; list-style: none;}
    #navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
    #navigation .menu > li { display: block; float: left; }
    #navigation .menu > li ul {}
    #navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
    #navigation .menu ul ul { left: 100%; top: 0; }
    #navigation .menu ul ul li { width: 100% }
    #navigation .menu li { position: relative }
    #navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
    #navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;}
    /* current item */
    #navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;}
    #navigation .menu > .active > a, #navigation li.active > a {color: #fff }
    #navigation .menu > li { margin-right: 5px; padding:0; }
    #navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
    /*drop-down styles*/
    #navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)}
    #navigation .menu li:hover ul { margin-top: 0; }
    #navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
    #navigation .menu ul li { border-bottom: 1px solid #ccc }
    #navigation .menu ul li:first-child { }
    #navigation .menu ul li:last-child { border: 0 }
    #navigation .menu ul li > a:hover { color: #67ABC9; background:none;}
    #navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
    #navigation .selector { display: none }
    #navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
    #navigation ul.sub-menu a { font-size:12px;}
    #navigation ul.sub-menu .active > a { color:#67ABC9}
    #navigation i { text-align:right}
    #menu-icon {display: none;}
    #slide-wrap a:hover{ color:#fff}
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    2
    Rep Power
    0

    Solved


    was: #navigation .menu > .active > a, #navigation li.active > a {color: #fff }

    Now: #navigation > .menu > .active > a, #navigation > .menu > li:hover > a{
    color: #fff;
    background:#67ABC9;
    }

IMN logo majestic logo threadwatch logo seochat tools logo