SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css active sub menu display

    hi

    I am having trouble with the active link I can't get the submenu to static display. I need the hover to do what it is doing. But say the active link is home I need the home sub menu to display and if you hover over another menu item
    it will display and once removed the statically active link will still be there.

    http://203.193.216.214/ is the link

    I currently have #tabs ul li:active ul {display: block;} at the bottom of the hover css

    any help would be great

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you put a special class on the body tag of each main page, like <body class="home"> than place a matching ID on the sub list (e.g. <ul id="home">) you can make a rule to display that UL when on the Home pages, something like

    .home #home {display...}

    EDIT: Hmm, this will cause a bit of a mess when other links are hovered, though, without some more elaborate CSS...

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi, Welcome to SitePoint!

    I'm afraid you have not understood the purpose of the :active pseudo class. It only effects the anchor state in that brief moment that it is clicked, it has been confused with current page styling by many people.

    Read through this recent thread for more explanations on it.
    Selected or Active?

    Your using a WP theme so it looks like they have already provided you with a class to target your current page styles with. In the html on your home LI you will see this class.

    Code:
    <li class="page_item page-item-12 current_page_item">
    You will want to use it to target the current page Sub UL to be visible at all times.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is what I am looking for. thanks tried the following after the all the menu code but it did nothing!!

    .current_page_item
    {
    display: block;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried
    .current_page_item ul
    {
    display: block;
    }

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You have to get more specific since it has an ID on it
    Code:
    #tabs ul li.current_page_item ul {
         display: block;
    }
    You also need to add z-index to your :hover state so it can layer over the current class

    Code:
    #tabs ul li:hover ul {
        display: block; 
        z-index:2;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works great but if I press say the contact link it or the pepper farm links anything before it will not hover.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I saw that coming. See the last codebox in previous post.
    It was a stacking order problem with the absolute positioning.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by purencool View Post
    it works great but if I press say the contact link it or the pepper farm links anything before it will not hover.
    Perhaps you could try a higher z-index on the hover styles.

    E.g.

    Code:
    #tabs ul li:hover ul {
    display: block;
    z-index:100;
    }

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You must have posted a few seconds after me Ralph
    Yes, that is the way to fix it though.

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for all your help I have been looking at you web site and have book marked it. I was going to make sure that this menu was done in complete css and with your help it is ta

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by purencool View Post
    I was going to make sure that this menu was done in complete css and with your help it is ta
    It could still use some improvement. Using display:none; to hide sub menus is not good practice from an accessibility standpoint. It is much better to hide the sublist off-screen with a large negative margin.

    This Menu is similar to what you are doing, if you view the page source you will find these rules that hide and show the sublist.

    Code:
    #nav li ul {
        position:absolute;
        height:26px;
        left:0;
        top:30px;
        margin-left:-999em;
        background:#EEF;
    }
    #nav li:hover ul,
    #nav li.sfhover ul {
        margin-left:0;/*show the sub ul on hover*/
    }
    That way your menu can still be tabbed through by keyboard users.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •