Grow your CSS skills. Land your dream job.

Drop-Down link becomes inactive

  • # September 18, 2008 at 10:19 am

    Hello

    I have created a drop-down menu that, on the roll over, spreads out like a grid. The links contained within the drop-down menu appear to be working fine, but I’m having a weird issue in Safari and Firefox with the parent link not working. Here is the page:

    http://www.vaughnstreet.com/who_we_are.html

    Here is the CSS controlling the drop-down:
    http://www.vaughnstreet.com/css/dropdown.css

    You’ll see the drop-down when you roll over the button called "What We Do". As you scroll through the drop-down items, you’ll see that they all have active links. However, the parent button (the actual "What We Do" text) is not an active link, even though my code is set up for it to be. Additionally, if you scroll back onto the main menu from the drop-down, the drop-down does not go away as it should (for example, try rolling your mouse through the drop-down menu and then move your mouse directly up to the "News & Projects" link…the drop-down doesn’t go anywhere).

    I think these two issues are related. The drop-down appears to work fine in IE6 and 7, but not in Safari or Firefox. I have been troubleshooting this issue endlessly, so any help with my code would be greatly appreciated.

    Thank you!

    # September 18, 2008 at 1:51 pm

    well i checked in safari version 3.1.1 and the menu seemed to work fine for me. It was also fine in firefox. I couldn’t see the issue you are talking about. Whenever I hovered over the menu. things worked just fine. Maybe you have some lag issues or something.

    # September 29, 2008 at 4:38 pm

    Looks and works great here on both FF3, IE6, IE7 and Safari for Windows.

    But, I did notice in IE6 your post background image doesn’t work properly because it is a png and it doesn’t look like you have any png fix installed. I really recommend UnitPNG fix. I even wrote a little comparison between that and supersleight a while back, and I’ve come to the realization now, after experimenting more UnitPNG is indeed superior.

    # October 9, 2008 at 10:50 am

    cybershot – thanks for your reply. i was able to resolve the issue by restructuring the code a little. it was occurring mostly on Mac’s…did you try testing in on a Mac?

    cssgirl – thanks for your suggestion. in all of my testing on IE6 browsers, I have not had any trouble displaying the PNGs referenced on the site. Is that issue still occurring for you? The site is now live, so here’s the new link: http://www.vaughnstreet.com/who_we_are.html

    I’m a little concerned about using that javascript because of this line in the Read Me file: "unitpngfix.js will change the CSS position attribute of some elements in order to allow them to be clickable/selectable. It will change elements with a background png to position:static (default) and all child nodes within that first element, that do not have a position specified, will get position:relative". Should I be concerned about the position of my background elements changing if i implement this code on all the site’s pages?

    Thanks again for your suggestions!!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".