Un hilight highlighted tab

Hi all,
I have list for a menu and when the page is loaded I want one link that is highlighted (has a default description div).


<ul class="sub-menu">
	<li class="active">link1</li>
	<li>link2</li>
	<li>link3</li>
	<li>link4</li>
</ul>

in the css


.sub-menu li:hover > a, .sub-menu li.active > a {
    background-color: red;
}

What I want is for the link1 to have a background of default white when hovering over the other links.
This will always be the first li element (first-child, tried that also).

Thanks,
Loren

Can you say a bit more about what you want? I’m assuming that the .active styles are working, but that if a link colored red because of the .active class, you want it to change to white while any of the other links are being hovered?

I also don’t understand why you say this will always be the first LI. Won’t Link3 be highlighted red on some pages, for example?

@ Ralph, a picture is worth a thousand words,

http://wlmark.com/z-presto/z-menu.php

Hover over models and you will see where I am going with this. My client wants to replicate the site http://cruisersyachts.com/ but I personally can’t just lift their code and styles.

If you hover over Company, you will see what I want. I just can’t figure it out.
Thanks.

They are using some jQuery to do that (stored in the global.js file):

$('.menu-main .menu-models > li').mouseover(function() {
        $('.menu-models .modal-dropdown').hide();
        $(this).find('.modal-dropdown').show();
    });
    
    $('.menu-main .menu-innovation > li').mouseover(function() {
        $('.active').removeClass('active');
        $('.menu-innovation .modal-dropdown').hide();
        $(this).addClass('active');
        $(this).find('.modal-dropdown').show();
    });

You are brilliant. I suspected a jQuery solution and you nailed it.
Thank you so much. I have not even looked at the jQuery files, only the CSS part.
You rock. Thanks.
(I had no idea about .removeClass and makes perfect sense. I was hoping for a CSS solution but this absolutely works for me.)

Cool, glad that helps. Have you tried it out? I’m not sure if it’s as simple as just cutting and pasting, but let us know if it’s not working out. :slight_smile:

We could avoid JQ here by setting a CSS override.
.sub-menu li, .sub-menu:hover li{ normal styles}
.sub-menu .active, li.active:hover, .sub-menu li:hover { active styles}

@Ralph, got it working by just,


    $('.main .sub-menu > li').mouseover(function() {
        $('.active').removeClass('active');
    });

This works great, I updated http://wlmark.com/z-presto/z-menu.php so you can see it in action.
Once removeClass is invoked I cant seem to add addClass.
This is what I have tried (along with many variations).


    $('.main .sub-menu > li').mouseout(function() {
        $('.active').addClass('active');
    });
// and / or
    $('.main > li').mouseover(function() {
        $('.active').addClass('active');
    });

If you hover over models and then over company you will see that the first link is no longer hi lighted.
(I also noticed that the upper left rounded corner disappears but I know how to deal with that)

@dresden_phoenix, I could not get the over ride going, I kind of understand the concept and that’s what I originally was trying to accomplish.

I know nothing about jQuery, I’m afraid, so I can only tinker in the dark. This is probably really inefficient, but seems to do the job:

$('.main .sub-menu > li:first-child').addClass('active');

$('.main .sub-menu > li').mouseover(function() {
    $('.active').removeClass('active');
});

$('.main .sub-menu > li').mouseout(function() {
    $('.main .sub-menu > li:first-child').addClass('active');
});

Thank you Ralph, you saved the day. I know very little about jQuery but can now glimpse some of it’s power.
I added one little bit to your code because as soon as you moused over the content, the .sub-menu > li a was moused out.
This is my complete block,


$('.main .sub-menu > li:first-child a').addClass('active');

$('.main .sub-menu > li  a').mouseover(function() {
    $('.active').removeClass('active');
});

$('.main .sub-menu > li  .modall-dropdown').mouseover(function() {
    $('.active').removeClass('active');
});

$('.main .sub-menu > li').mouseout(function() {
    $('.main .sub-menu > li:first-child').addClass('active');
});

You can visit the link I previously posted to see it in action.

I really do appreciate your help and now I have the ultimate menu.
Sorry about the delays in my replies but am busy incorporating this into a CMS I designed.
The menu will be built on the fly from info from the database. Now that I have the basics I can port it into my PHP code.
Once again, many thanks.
Loren.

You’re welcome, Loren. There’s no problem with the timing of your replies. Thanks for the feedback. :slight_smile:

It’s always nice to find a solution for yourself, so well done for finding a way to refine it. :slight_smile: