Please help me with CSS!

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

Oct 22, 2011

Please help me with CSS! by T.Kuranari at 7:27 PM (318 Views / 0 Likes) 2 replies

  1. T.Kuranari
    OP

    Member T.Kuranari GBAtemp Regular

    Joined:
    Aug 30, 2011
    Messages:
    150
    Country:
    Japan
    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

    Supervisor tj_cool Stuff

    Joined:
    Jan 7, 2009
    Messages:
    9,942
    Location:
    This planet
    Country:
    Belgium
    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

    Member T.Kuranari GBAtemp Regular

    Joined:
    Aug 30, 2011
    Messages:
    150
    Country:
    Japan
    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 :)
     

Share This Page