Question

All other browsers (including IE8+) seem to handle this code with no issue; just IE7 is failing. It does nothing when the li is clicked (no console errors either). Using latest jquery 1.7.2 library.

Here is the javascript function:

function expandableMenu(){
    $('#nav li').click(function(){
        var $child = $(this).next();
        if($child.is('.subNav')){
            if($child.is(':hidden')){
                $('#nav > ul').slideUp(300);
            }
            $child.slideToggle(300);
        }
    });
}

here’s the html:

  <ul id="nav">
    <li id="accommodations"></li>
    <ul class="subNav">
      <li><a href="#">Kitchen</a></li>
      <li><a href="#">Family Room</a></li>
      <li><a href="#">Sauna</a></li>
    </ul>
    <li id="attractions"></li>
    <ul class="subNav">
      <li><a href="#">Bryce Canyon National Park</a></li>
      <li><a href="#">Zion National Park</a></li>
      <li><a href="#">Cedar Breaks Natl Monument</a></li>
    </ul>
    <li id="reserve"></li>
  </ul>

finally, the CSS:

#nav {
    top: -40px;
    left: 6px;
    position: relative;
    list-style-type: none;
    z-index: -1;
}

#nav li {
    height: 39px;
    vertical-align: bottom;
    position: relative;
}

#nav ul.subNav {
    display: none;
    list-style-type: none;
    width: 273px;
}

Answer 1

First of all, if you’re using nested lists you have to put second ul inside li element:

<ul id="nav">
    <li id="accommodations">First list
        <ul class="subNav">
          <li><a href="#">Kitchen</a></li>
          <li><a href="#">Family Room</a></li>
          <li><a href="#">Sauna</a></li>
        </ul>
    </li>
    <li id="attractions">Second list
        <ul class="subNav">
          <li><a href="#">Bryce Canyon National Park</a></li>
          <li><a href="#">Zion National Park</a></li>
          <li><a href="#">Cedar Breaks Natl Monument</a></li>
        </ul>
    </li>
    <li id="reserve"></li>
</ul>

Then use var $child = $(this).find('.subNav'); to get nested list in your click event. Try changing z-index, when I was checking your code on jsfiddle clicking did nothing too – when I changed -1 to 99 it started work. Maybe IE7 does not recognize negative z-index values.