Target sub sub nav

pr0c3ss · September 19, 2014, 5:54pm

Got a menu with a background colour change on hover… I’ve gone as far as being able to change the first sub menu background, but dont know how to go further down.

<li class="bcolor6"><a href="#"><h9>Support</h9></a>
                    <ul class="subnav">
                            <li><a href="#">FAQ</a></li>
                            <li>has sub
                                <ul class="sub_subnav">
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                </ul>

                            </li>
                            <li>sub</li>
                            <li>has sub
                                <ul class="sub_subnav">
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>

.bcolor6>ul is fine… but how do I target the next submenu?
Oh and I cant target sub_subnav class as this is also used in another .bcolor and has different colours

bcolor6:hover{
	background-color:#FCBDBE!important;
}

.bcolor6>ul{
background-color:#D0BDBE!important;
}
	
.bcolor6>ul>ul{
background-color:#D0BDBE!important;
}

RyanReese · September 19, 2014, 7:30pm

Do something like this.

.bcolor6{ position:relative;}
.bcolor6:hover ul.subnav{bring ul into view}
.bcolor6 li:hover ul.sub_subnav{different coordinate settings etc}

Sorry I’m headed home from work - probably rushed.

http://www.pmob.co.uk/temp/drop-down-multi.htm

Look at that.

pr0c3ss · September 19, 2014, 7:33pm

Thanks a lot. Heading to bed for now but will check it out tomorrow and get back to ya

pr0c3ss · September 20, 2014, 7:20am

Nice 1 Ryan. This did the trick…

.bcolor6 li:hover ul.sub_subnav{
background-color:#D0BDBE!important;
}

RyanReese · September 20, 2014, 1:18pm

You shouldn’t need !important to do this. You just need to give it a bit more specificity. If you are finding that !important is needed to make that block of code work, then it’s just specificity…if you post a link to the page in question I can confirm what you need to do.

pr0c3ss · September 21, 2014, 5:14am

I havent got the page uploaded, nor bought any web space to do so yet! But being more specific basically means including the parents/children right?

ralphm · September 21, 2014, 5:15am

That’s one of the ways, yes—be it elements themselves or their classes/IDs.

pr0c3ss · September 21, 2014, 10:55am

Yeah I think I’m with you. I don’t foresee the !important rules here ever causing a problem, as I won’t need to use these classes again oh… heres the code for the nav though, if you do wish to say how I could be more specific and rid the important rule…

<div id ="nav-container">

       <div class="nav">
                <ul>
                   
                    <li class="bcolor1"><a href="#"><h9>Sign In</h9></a></li>
                    
                  <li class="bcolor2"><a href="#"><h9>News</h9></a></li>

                  <li class="bcolor3"><a href="#"><h9>My Account</h9> </a>
                    <ul class="subnav">
                            <li></li>
                            <li>sub</li>
                            <li>sub</li>
                            <li>has sub, yes this
                                <ul class="sub_subnav">
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                </ul>
                            </li>
                    </ul>
                  </li>
                    
                  <li class="bcolor4"><a href="#"><h9>Abcdefg</h9></a></li>
                  <li class="bcolor5"><a href="#"><h9>Abcd</h9></a></li>
                  <li class="bcolor6"><a href="#"><h9>Support</h9></a>
                    <ul class="subnav">
                            <li><a href="#">FAQ</a></li>
                            <li>has sub
                                <ul class="sub_subnav">
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                </ul>

                            </li>
                            <li>sub</li>
                            <li>has sub
                                <ul class="sub_subnav">
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                    <li>sub</li>
                                </ul>
                            </li>
                    </ul>
                  </li>
                </ul>  
        </div><!--end nav-->
  </div><!--end nav-container-->

So it’s the sub_subnav I need to target, but that id is being used by another

PaulOB · September 21, 2014, 12:02pm

We’d need your full css to work out what specificity is actually needed as it will depend on how you have already targeted those elements.

!important is fine to use when you know why you are using it and what the implications are. It is not fine to use when you don’t know why it is working as then it is basically a quick fix (hack).

Contrary to belief !important is a useful tool and can cut down on selectors when used in the right circumstances. However, often its over-use indicates that the logic of the page is lacking in some way and a simpler approach could usually provide more consistent results.

pr0c3ss · September 21, 2014, 4:14pm

Ah ok. As it is, it works as wanted, so no urgency to remove the important rules here. But if anyone wants to, I may pick up something

h9{
font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", sans-serif;
font-size:13px;
color:black;
}


h9:hover{
	color:#FF5E19;
}


.bcolor1{
	border-color: #60B0EB!IMPORTANT;
	width: 12%;
}


.bcolor1:hover{
	/*border-color: #669abc;
	background-color:#C4E6F4;*/
	
	
	background-color:#C4E6F4;
	border-bottom-left-radius:15px;
	border-top-left-radius:15px;
	
    -webkit-transition:all .8s;
    -moz-transition:all .8s;
     transition:all .8s;
}



.bcolor2{
	border-color: #0F7200!IMPORTANT;
    width: 13%;
}


li.bcolor2:hover{
	
	background-color:#C9FFD6;
	
	-webkit-transition:all .8s;
    -moz-transition:all .8s;
     transition:all .8s;
}


.bcolor3{
	width: 20%;
	border-color:#7071a9 !important;
}


li.bcolor3:hover{
	background-color:#C4B7F0;
	
	-webkit-transition:all .8s;
    -moz-transition:all .8s;
     transition:all .8s;
}


.bcolor4{
    width: 15%;
	border-color:#E0FF00 !important;
}



li.bcolor4:hover{
	background-color:#FCFAE3;
	-webkit-transition:all .8s;
    -moz-transition:all .8s;
    transition:all .8s;
}


.bcolor5{
    width: 13%;
	border-color:#FF8600!important;
}


li.bcolor5:hover{
	
	background-color:#FFE0C8;
    -webkit-transition:all .8s;
    -moz-transition:all .8s;
     transition:all .8s;
}



.bcolor6{
    width: 14%;
	border-color:#FF0004!important;
}


li.bcolor6:hover{
	background-color:#FCBDBE;
	border-top-right-radius:15px;
	-webkit-transition:all .8s;
    -moz-transition:all .8s;
    transition:all .8s;
	}

bcolor6:hover{
	background-color:#FCBDBE!important;
}

.bcolor6>ul{
background-color:#D0BDBE!important;
}
	
.bcolor6 li:hover ul.sub_subnav{
background-color:#D0BDBE!important;
}

PaulOB · September 21, 2014, 5:04pm

Hi,

If I remove all the !importants from the above CSS then I see no difference in the display at all. This may be because there is some other code that we have not seen yet but as far as I can tell you don’t actually need any of the !importants in that above section.

There are some odd things however in that you have the FAQ section highlighted by default (which I assume is what you wanted)?

You are then changing the colour of the nested ul in that section to the same color that it already is which seems a bit pointless.

The background is already D0BDBE so there would seem no need to change it unless of course there is some js that turns this into a dropdown menu and positions elements elsewhere?

There is also a typo here with a missing class (.).

bcolor6:hover {background-color:#FCBDBE;}

Although that will probably have no impact on the proceedings.

Also note that there is no such html tag as an ‘h9’ as the highest is an h6. The heading level should be at the correct level for the placement of the html within that section which means that if you are using an h6 heading tag then that menu structure should itself be following a heading of h5.

pr0c3ss · September 22, 2014, 5:25am

Good Stuff! I’ll remove all the important tags, but I’m pretty sure they’re needed, probably because of the way the JS was written.

FAQ should be black and on hover change…

The changing of the same colour was a quick copy and paste. It will change, so that it progressively becomes a lighter colour.

Will put in class .

The JS does seem to position sub/subnav/sub_subnav and seemingly each class needs the color applied. Will attach JS incase your curious

Thanks for input

var $m = jQuery.noConflict();
$m(document).ready(function() {



    $m(".nav").click(function() {
        $m(".nav-fix>ul").stop().toggleClass("link-show");
    });

    $m(".nav>ul>li").hover(function() {
        $m(this).find(".subnav").stop().fadeToggle(300);
    });

    $m(".subnav li").hover(function() {
        $m(this).find(".sub_subnav").stop().fadeToggle(300);
    });


    $m(".togel-btn").click(function() {
        $m(".nav-small").slideToggle();
    });


    $m(".has-sub").click(function(e) {
//                    console.log(this);
        e.stopPropagation();
        $m(this).find('ul:first').stop().slideToggle(100);
    });

    $m('.has-sub li').click(function(e) {
        e.stopPropagation();
    });


});




$m(window).scroll(function() {
    var sticky = $m('.stiky-header'),
            scroll = $m(window).scrollTop();
    var sticky_nav = $m('.nav-small'),
            scroll = $m(window).scrollTop();
    var shopingcart = $m('.shopingcart'),
            scroll = $m(window).scrollTop();
    var togel_btn = $m('.togel-btn'),
            scroll = $m(window).scrollTop();


    var logo = $m('.logo'),
            scroll = $m(window).scrollTop();
    var shopingcart1 = $m('.shopingcart1'),
            scroll = $m(window).scrollTop();
    var rows = $m('.rows'),
            scroll = $m(window).scrollTop();



    if (scroll >= 110) {
        sticky.addClass('header-fixed');
        sticky_nav.addClass('nav-small-active');
        shopingcart.addClass('shopingcart-fix');
        logo.addClass('logo-fix');
        rows.addClass('row-fix');
        shopingcart1.addClass('shopingcart1-fix');

        togel_btn.show();

        $m(".span-none").hide();

    }
    else {
        sticky.removeClass('header-fixed', 50);
        sticky_nav.removeClass('nav-small-active');
        shopingcart.removeClass('shopingcart-fix');
        logo.removeClass('logo-fix');
        rows.removeClass('row-fix');
        shopingcart1.removeClass('shopingcart1-fix');
        togel_btn.hide();


        $m(".nav-small").hide();
    }
});