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 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down Menu Hover Trouble

    I have created a website using a shopping cart software that will NOT (under any circumstances) let me change the doctype. My problem would be fixed with a proper doctype, but I can not to do this, so I was wondering if anyone had a more creative solution. I have a drop down menu on my site, and when you hover over the 'products' link, a drop down falls beneath it, and when your mouse leaves that box but stays in the drop down menu, I want the products link to stay in its hover state, which it does in everything but IE. So, do you have any solutions on how to with jquery or CSS make this happen? Thanks!

    http://www.edirecthost.com/hhmobileh...are/?preview=1
    Link to my site.

    Css for menu

    http://p.b5z.net/i/u/10145668/i/css.css

    Thanks in advance!!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    ul#topnav li.products:hover a,ul#topnav li.products a.products:hover,{ 
        background: url(Hammer_Sprite) -144px -63px;
        width: 238px !important;
        }
    IE doesn't support the :hover pseudo on any elements other than anchor.

    Thus, you need to adjust your javascript in a such a way that it should add an extra class to the hovered <li>, say class="sfhover", and then add the background image and position to the <li> tag only.

    See the small javascript snippet at http://www.htmldog.com/articles/suckerfish/dropdowns/

    In your case, you may add this.className+=" sfhover"; and this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); into the hoverIntent script.

    PS: I observe a lot of specific stylesheets using conditional comments. I'd recommend you to remove them all and then add some specific hacks in the main CSS file, if required!. In fact, if your markup is valid and well formed, all browsers will give a desired output, unless they are very old, like IE5/6.
    Last edited by abduraooft; 01-31-2012 at 06:43 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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