Please help me with CSS!

Discussion in 'General Off-Topic Chat' started by T.Kuranari, Oct 22, 2011.

  1. T.Kuranari
    OP

    T.Kuranari GBAtemp Regular

    Member
    150
    2
    Aug 30, 2011
    I am currently building my own website locally on my computer and have issues with CSS, specifically with designing the topmenu. I want to attach to each item of the topmenu 2 images, one default one and one that shows up via a mouseover-effect. But here is the thing, I also want to add to each menu item a submenu and I don't want the mouseover-effect-picture to vanish if I point the mouse cursor to the submenu. So basically I want the mouseover-effect to still be enabled while the mouse cursor points at the submenu. But I don't know how this could be done.

    Here is my current CSS code regarding the image mapping of the first item of the topmenu:

    Code:
    #topmenu ul.menu .item-444 a {
    background: url('../images/image1.png') 0 0 no-repeat;
    background-position: center;
    
    }
    
    #topmenu ul.menu .item-444 a:hover {
    background: url('../images/image2.png') 0 0 no-repeat;
    background-position: center;
    
    }
    Thank you :)
     
  2. tj_cool

    tj_cool Site dev

    Supervisor
    9,993
    -1
    Jan 7, 2009
    Belgium
    This planet
    I don't know your HTML code, but assuming the li element contains both the anchor and the submenu, you could put the hover on the li instead:
    Code:
    From:
    ul li a:hover { ... }
    
    To:
    ul li:hover > a { ... }
    Note that the above won't work on IE unless you use a Strict Doctype (it'll ignore the hover otherwise). It may also run a bit slower in IE7/8.
    Apparently that's because using :hover on non-anchors is "inefficient".


    Alternatively you can go and write JavaScript that adds a certain class to the anchor when hovering the list or something.
     
  3. T.Kuranari
    OP

    T.Kuranari GBAtemp Regular

    Member
    150
    2
    Aug 30, 2011
    Thank you tj and I'm sorry for taking so long to reply. I managed to gather a lot of CSS knowledge since I started this thread an was able to solve any CSS issue myself :)