Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member Be Loud Online's Avatar
    Join Date
    Apr 2011
    Location
    GTA, Ontario, Canada
    Posts
    53
    Member #
    27439
    Liked
    7 times
    I have made a CSS only 3 teir nav bar, but am having trouble with one issue. When you hover over the anchor it changes colour. But if you hover over first teir and it reveals the second teir, when you move off the first teir anchor it returns to the original color.

    I need the first teir to remain in "hover mode" - same color as if it was beign hovered over - even if I move off to the third teir. How can I do this in CSS?

    As an example:

    Here is the HTML:

    HTML Code:
    <ul><li>First Teir
            <ul><li>Second Teir
                    <ul><li>Third Teir
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    Here is the CSS:

    Code:
    ul
    {
    list-style:none;
    }
    
    li a,
    li li a,
    li li li a
    {
    color:#FFF;
    }
    
    li a:hover,
    li li a:hover,
    li li li a:hover
    {
    color:#000;
    }
    
    ul ul,
    ul li:hover ul ul,
    ul ul li:hover ul ul
    {display: none;}
     
    ul li:hover ul,
    ul ul li:hover ul,
    ul ul ul li:hover ul
    {display: block;}

  2.  

  3. #2
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Heya,

    I like where this question is going! Could you post your sample's? I do not see any anchor's on the sample here.

    Are you trying to get a cascading effect? where as you hover over the Parent LI, the Children List-Items (LI) become visible and continues through the tree?

    If so, you may want to start looking into Child Selectors:

    Code:
    ul>li:hover {
        display: block;
    }
    If you want to get real fancy, Pseudo-classes can really spice things up:
    Code:
    :first-child
    :nth-child
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com