SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    styling elements in a nested list

    Hi guys,
    I am having a lot of trouble with recreating a navigation and subNavigation that I once did before or at least understanding how I got it to work

    In the main navigation of this html document, when one hovers over one of the main li's (about, groups, media, etc) the background position is changed so a different image shows to display that one is hovering on that anchor in that li.

    Also when hovering on that link, a nested list appears. Now one can also hover over an li in the nested list (subNavigation) and upon doing so the text-decoration is set to underline.
    However, also the on hover background position is kept to show that although one is not hovering on the main anchor, one is in the nested list that is a child of that anchor.

    More simply, on hover of the parent anchor, it has a darker background image. On hover of the child and nested anchor, the child anchor is given an underline and the darker background image of the parent anchor is kept.

    So I was obviously able to do this, but I can not figure out how I did so with only css and js.
    I mean, how can I style the parent anchor (keep the on hover background position) when one is not acting upon or hovering over it.
    It is in times like this that I wish I kept comments in my code

    I would really appreciate it if someone could help me understand how I did this in CSS and I hope I explained it well enough.

    Please let me know if you have any Questions, Comments, or Concerns-- or if further or simpler explanation is needed

    Thanks in Advance & Best Regards,
    Team 1504.

    P.S. If you play around with the navigation and hover over each of the links and then hover over the sub (nested) links that appear underneath then that should help.
    Here is the live example again.

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your top row is a list. You have assigned css to li:hover (note: NOT <a>, but <li>!), so it changes background image and shows second row.

    When your mouse is over second row, it is still over that <li> from top row because your second row is a list inside that <li>, so li:hover is being shown.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh okay. So its When the li is hovered on. So what would be the css syntax for keeping the on hover bg position when one is hoverig on the second/nested/underneath row?

    Thank you btw, I really appreciate it.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    This rule here, for example:

    Code:
    nav ul li#dpn-outreach:hover a, nav ul li#dpn-outreachover a {
      background-position: -412px -38px;
    }
    It's saying "when that LI is hovered, make the <a> a certain style".

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by team1504 View Post
    Oh okay. So its When the li is hovered on. So what would be the css syntax for keeping the on hover bg position when one is hoverig on the second/nested/underneath row?
    You are confusing the structure a little. The second list below is still part of the top list. It's not a separate element.

    As others have already said:
    Code:
    nav ul li#dpn-outreach:hover a
    The above rule applies to all anchors while the list item is hovered. That includes the top level item and all the anchors in the sublist.

    Therefore you would follow immediately with another rule that wuold set the nested list anchors back to default and then finally another rule to change the nested link anchors when hovered.

    It's a three stage process.

    e.g.

    li:hover a{background:red}/* style main level anchor*/
    li:hover li a{background:blue}/* nested nested anchor to default*/
    li:hover li a:hover{background:green}/* nested anchor hover colour*/

    Remember that the subnav is part of the parent list and not a separate element so all the time you hover on the parent you are automatically still hovering the parent even when on the sublist.

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I appreciate all your guys' help
    Quote Originally Posted by ralph.m View Post
    This rule here, for example:

    Code:
    nav ul li#dpn-outreach:hover a, nav ul li#dpn-outreachover a {
      background-position: -412px -38px;
    }
    It's saying "when that LI is hovered, make the <a> a certain style".
    Ahh okay. At first when I read it I thought you were saying
    x:hover, y
    means when x is hovered on style y accordingly. Which complete confused me because I thought that , was essentially an 'and'.
    But now that I am quoting you, I realise what you mean how on hover of the li all the anchor's inside it are styled accordingly and that the comma just ensures the styling to a specific anchor.

    If that confused anyone-- long story short, I understand what ralph meant. , is an and for selectors in css and adding the hover pseudo-class to one of the parent elements means that any child elements written next in the series of selectors is only styled when the parent is hovered on

    Quote Originally Posted by paul o'b
    The above rule applies to all anchors while the list item is hovered. That includes the top level item and all the anchors in the sublist.

    Therefore you would follow immediately with another rule that wuold set the nested list anchors back to default and then finally another rule to change the nested link anchors when hovered.
    i considered that because on reading the html, I saw that the nested list is inside and one could style the parent when the child is hovered on because the child is within the parent.
    But I must have wrote it wrong as I gave up on that idea.

    It's a three stage process.

    e.g.

    li:hover a{background:red}/* style main level anchor*/
    li:hover li a{background:blue}/* nested nested anchor to default*/
    li:hover li a:hover{background:green}/* nested anchor hover colour*/
    Ahh okay, thank you for explaining the 3 step process. Now that I think about it, sometimes I forget that when a machine / browser processes this, it happens essentially instantaneously to the point where it seems like one line of code to the human eye, if you get what I am saying.

    Thank you all again!


Tags for this Thread

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
  •