Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Quick rollover fix for CSS dropdown menu - advice please

    Hi,

    I'm sure this must have been asked before, but my forum searches have proven fruitless.

    I've got a dropdown menu at:
    http://www.moonmilk.org/test/phome.php

    It's all working fine except that when I hover over the second level items I want the hover style for the corresponding first level item to remain.

    For example, when I roll over "artwork" I don't want the "Projects" item to revert back to it's normal (black) state, I want it to remain "activated" (transparent).

    I'm sure the css just needs a tiny little tweak somewhere but haven't been able to solve this without introducing other problems (for example ALL the first level items showing the rollover state).

    menu css is at: http://www.moonmilk.org/test/styles/pmenu.css

    Thanks in advance for any suggestion.

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ahh... seems it may be sorted out with a " > " selector somewhere....but just realised nothing works in IE anyway so back to the drawing board....

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    You have this:
    Code:
    #menu :hover > a.ah {
    color: #dddddd;
    //background: #000000 url(images/rolltag.gif) no-repeat 100% 100%;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    You are using the behavior file csshover.htc, but it doesn't seem to parse the above selector correctly.

    This will not work with csshover.htc:
    Code:
    :hover {...}
    This will not work either with csshover.htc:
    Code:
    *:hover {...}
    Secondly, IE6 does not support the direct child combinator (>). You will have to find another selection rule which both csshover.htc and IE6 supports.

    Perhaps like this:
    Code:
    #menu ul ul li:hover a.ah {
    color: #dddddd;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    Also note that comments are not marked by // in CSS. You need /* */

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion Koyama.

    I've now made 3 different variations and they all have different problems:
    The css file is the same for each, I've just commented different bits out. I also made the colours stupidly vivid for easier testing.

    http://www.moonmilk.org/test/phome1.php
    http://www.moonmilk.org/test/styles/pmenu1.css
    Works on all browsers but has the original problem of the rollover style of first level items reverting back once rolled off.

    http://www.moonmilk.org/test/phome2.php
    http://www.moonmilk.org/test/styles/pmenu2.css
    A perfect solution in Firefox and Safari but not in IE due to the IE issues Koyama mentioned.

    http://www.moonmilk.org/test/phome3.php
    http://www.moonmilk.org/test/styles/pmenu3.css
    Works in all browsers but once the first level items are rolled over (and rollover style displayed) then ALL levels further down the menu are displayed in rollover state too.

    What I can't work out is how to declare the hover styles so that they act ONLY on the item being hovered (and not deeper levels) but still keep this item switched on when we move the cursor over the next level items. It seems I need something like a combination of variations 1 and 3 above, but how can one write this in css?

    I think maybe I've misunderstood the syntax. Sorry for the long list of questions following, but I'm really trying to UNDERSTAND what's going on, not just get a solution.

    1.
    If I use for example
    #menu ul ul li:hover a {
    color: #0000ff;
    }

    I thought this meant: "if a list item inside the second level of <ul> tags is hovered on, then change the colour of all <a> items in the next level of the menu".
    But it actually seems to be changing <a> items in ALL levels below the hovered item.
    (I thought if I wanted deeper levels I'd need to use something like
    #menu ul ul li:hover ul ul a {...})

    2.
    I also assume I've misunderstood something else in the declaration as I can see no part of this declaration which is making the rollover style remain switched on once I move the cursor off this item. Which part does this?

    3.
    Further confused by whether the declarations should be made for the <a> links or for the <li> itself. As far as Firefox is concerned, are the lines
    #menu a:hover { color: #0000ff; } and
    #menu li:hover a { color: #0000ff; } different in meaning? If so, how?

    4.
    Is there some css syntax which allows me to say "if an item is hovered on, change the style of something BEFORE it in the menu structure"?

    Thanks in advance for any tips...sorry again for the long list of questions, I'm hoping once I'm clearer on the meaning (in simple English) of the syntax it might help me sort out such issues on my own in future.

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    #menu a:hover { color: #0000ff; } and
    #menu li:hover a { color: #0000ff; } different in meaning? If so, how?

    The :hover can only be applied to links in IE6 so this form of dropdown colouring will not work at all. For that you'd have to use:

    #menu li a:hover - this applied to hovered links within a list item inside the div #menu.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Koyama suggested before that #menu ul ul li:hover a.ah {...} would be ok,
    but you're saying that :hover can only be applied to links i.e. in the form
    #menu li a:hover

    Are you saying Koyama gave incorrect advice?

    Either way, what I really want to know is WHAT THEY MEAN, how many levels deep they apply, and which parts of the syntax do the things I asked in my questions.


    Yeah, I do realise the declarations in my question #4 don't work in IE - I am just trying to understand the difference in meaning in plain English between the two declarations, which is why I asked if for FIREFOX,
    #menu a:hover { color: #0000ff; } and
    #menu li:hover a { color: #0000ff; } were different in meaning and if so, how.

    Hoping for some answers....thanks in advance

  • #7
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    If I'm understanding this correctly why don't you create a new class for the sub sub menu:

    Code:
    #menu ul ul li:hover a.ag {   
    color: #ff0000;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    and in the HTML change:

    Code:
    <li><a href="#" class="ah">subprojects</a>
    	<ul>
    		<li><a href="#">sub1</a></li>
    		<li><a href="#">sub2</a></li>
    	</ul>
    </li>
    to:

    Code:
    <li><a href="#" class="ag">subprojects</a>
    	<ul>
    		<li><a href="#">sub1</a></li>
    		<li><a href="#">sub2</a></li>
    	</ul>
    </li>
    ??? I think the problem you're having is that because they use the same class when one is hovered it highlights everything of that class, including the item in the next menu... changing this class should sort that out, I think. And NO, Koyoma is not wrong, as he(?) suggested that this would only work in IE and not FF, but it kinda helps give you an insight in to what is happening there.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion ahallicks It helped.

    Following that, I've made a working version by giving EVERY level of link (both the submenu heads and individual links) a unique class name. Cumbersome but working. I say cumbersome as I've seen other css menus which don't use so many classes, so there must be a way to cut it down.

    Now, although this method of adding numerous classes is a useable workaround, I still don't have answers to any of the questions from my long post #4 above, so haven't really gained much understanding.

    If anybody might be able to offer some advice, it would be very much appreciated. I have 4 books on CSS and all have examples of navigation menus, but none address those specific questions I have.

    Anybody know? Thanks in advance....

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pavinder View Post
    http://www.moonmilk.org/test/phome1.php
    http://www.moonmilk.org/test/styles/pmenu1.css
    Works on all browsers but has the original problem of the rollover style of first level items reverting back once rolled off.
    Here you are using this selector:
    Code:
    #menu a.ah:hover {
    color: #ff0000;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    This selector does not allow the color on the first level links to remain. The problem is that the second level list is not nested within the first level a.ah elements, and so, the a.ah:hover is interrupted when you move the mouse from the first level to second level links.
    Quote Originally Posted by pavinder View Post
    http://www.moonmilk.org/test/phome2.php
    http://www.moonmilk.org/test/styles/pmenu2.css
    A perfect solution in Firefox and Safari but not in IE due to the IE issues Koyama mentioned.
    On that page you are using the correct selector. Namely this:
    Code:
    #menu :hover > a.ah {
    color: #dddddd;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    Perhaps I would modify it to the below. It makes it more clear that the hover applies to the li element.
    Code:
    #menu li:hover > a.ah {
    color: #dddddd;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    By changing :hover to li:hover the selector is almost working in IE6 with that added csshover.htc. The only problem is the child combinator (>). To achieve the effect of the child combinator without using it you could do something like this. It would then be working in IE6 too.
    Code:
    #menu ul li:hover a {
    color: green;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    #menu ul li:hover ul a {
    color: red;
    background: url(images/rolltag.gif) no-repeat 100% 
    } 
    #menu ul ul li:hover a {
    color: green;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    #menu ul ul li:hover ul a {
    color: red;
    background: url(images/rolltag.gif) no-repeat 100% 
    } 
    #menu ul ul ul li:hover a {
    color: green;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    #menu ul ul ul li:hover ul a {
    color: red;
    background: url(images/rolltag.gif) no-repeat 100% 
    } 
    #menu ul ul ul ul li:hover a {
    color: green;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    #menu ul ul ul ul li:hover ul a {
    color: red;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    If you have more levels you will have to add more selectors. As you can see, it is quite handy to have the child combinator.
    Quote Originally Posted by pavinder View Post
    http://www.moonmilk.org/test/phome3.php
    http://www.moonmilk.org/test/styles/pmenu3.css
    Works in all browsers but once the first level items are rolled over (and rollover style displayed) then ALL levels further down the menu are displayed in rollover state too.
    Here you have this:
    Code:
    #menu ul ul li:hover a.ah {   
    color: #ff0000;
    background: url(images/rolltag.gif) no-repeat 100% 
    }
    The problem is that even if there is some element between the li:hover and the a.ah, then the selector targets that a.ah element. To fix it, you would need the child combinator (>) between the li:hover and a.ah. But again, IE6 does not support this.
    Quote Originally Posted by pavinder View Post
    What I can't work out is how to declare the hover styles so that they act ONLY on the item being hovered (and not deeper levels) but still keep this item switched on when we move the cursor over the next level items. It seems I need something like a combination of variations 1 and 3 above, but how can one write this in css?
    As you have noted, variant 2 is the correct selector. IE6 does not support your variant 2, but that is a problem with IE6 and not your selector.
    Quote Originally Posted by pavinder View Post
    1.
    If I use for example
    #menu ul ul li:hover a {
    color: #0000ff;
    }
    I thought this meant: "if a list item inside the second level of <ul> tags is hovered on, then change the colour of all <a> items in the next level of the menu".
    But it actually seems to be changing <a> items in ALL levels below the hovered item.
    (I thought if I wanted deeper levels I'd need to use something like
    #menu ul ul li:hover ul ul a {...})
    That is not correct. li:hover a will target not only the a elements that are direct children of the hovered li element. It will also target the a elements that are nested deeper. To get what you want you would need the child combinator: li:hover > a. As for your second selector, #menu ul ul li:hover ul ul a {...}, this one ensures that you only target the a element that are nested within the li:hover between at least two ul elements.
    Quote Originally Posted by pavinder View Post
    2.
    I also assume I've misunderstood something else in the declaration as I can see no part of this declaration which is making the rollover style remain switched on once I move the cursor off this item. Which part does this?
    When you hover over the first level links, and move the mouse to the second llevel menu, then you are technically still hovering over the first level li elements. This is because the second level menus are nested within the first level li elements (but not within the first level a elements).
    Quote Originally Posted by pavinder View Post
    3.
    Further confused by whether the declarations should be made for the <a> links or for the <li> itself. As far as Firefox is concerned, are the lines
    #menu a:hover { color: #0000ff; } and
    #menu li:hover a { color: #0000ff; } different in meaning? If so, how?
    They are not the same. As I just said, when you move the mouse from the first level link to the second level link, then the a:hover is discontinued, but not the li:hover.
    Quote Originally Posted by pavinder View Post
    4.
    Is there some css syntax which allows me to say "if an item is hovered on, change the style of something BEFORE it in the menu structure"?
    I'm affraid it isn't possible. For a hovered element you can target its direct child (>), its sibling (+), or any nested element ([space]). What you are looking for would be something like a parent combinator (<), but I don't think that this exists. You will need JavaScript to achieve what you want. Maybe someone will correct me on this.

    I didn't test ahallicks' suggestion, but using classes may well be an acceptable work around for IE6 not supporting the child combinator. If you want to drop classes entirely, you would probably have to use many more selection rules like I showed you for variant 2.

  • #10
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    A fantastic explanation Koyama.

    Thank you so much, it really makes things clearer.

    I can't tell you how grateful I am for the time and effort you must have spent in responding at such length....

    Your next life will be blessed.


  •  

    Posting Permissions

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