IE 6/7 LI Link's Unclickable

Posted on 2009-02-23
Medium Priority
Last Modified: 2013-12-08

In the menu on the left had side of the page, two LI menu items 'Boys' & 'Girls' (highlighted in yellow) both use JQuery to slide and show a hidden DIV. This DIV contains another list of LI's. The LI's contain links but these links are unclickable in IE6/7 - well, you can click on them but they wont goto their target page.

Does anyone know why this is happening?
Question by:datacomsmt
  • 2
LVL 43

Accepted Solution

David S. earned 2000 total points
ID: 23718555
You nested each <div> containing a submenu directly in the parent <ul>. That's not valid. Try nesting them in the existing <li>s.

Author Closing Comment

ID: 31550448
Excellent answer, thanks!

Author Comment

ID: 23728127
Great answer, thanks again! A couple of follow up question relating to this:

IE6 & 7: Once you click either 'Boys' or 'Girls' you'll see that it slides down then jumps up a little bit to sit in it's correct place. I think this has something to do with CSS Margins or Padding. Does anyone know what this is happening?

I would also like to swap the BG image that appears in 'li#boys-button' depending on whether or not 'li#boys-sub-cats' is visible.. What would be the best way to go about this (inc. changing the BG image back to it's original when 'li#boys-sub-cats' is no longer visible)?

(Also, I know IE8 is still in BETA but.. Once you click either 'Boys' or 'Girls' to slide the Menu back up it loses it's margin/padding below and the next menu item sits directly underneath it, has anyone got any pointers on this?)

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month13 days, 12 hours left to enroll

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question