[syaoMember]

Thanks, I’ll look into accessing the menu’s array. I’m unable to manipulate the ID’s from the JSON feed as far as I’m aware, so the 2nd option may do the trick.

[syaoMember]

The menu loads through a separate .js file that’s included with the page, and I know it’s loading properly since I see the changes in the HTML/DOM in the final page’s source code.

I’m not completely sure where the original HTML is from now(it’s now coming from a JSON feed someone else developed), but it used to come from a hard-coded standard list, something like this:

<ul>
  <li>Item1</li>
  <li>Item2
    <ul>
      <li>i2Sub1</li>
      <li>i2Sub2</li>
    </ul>
  </li>
  <li>Item3</li>
  <li>Item4
    <ul>
      <li>i4Sub1</li>
      <li>i4Sub2</li>
      <li>i4Sub3</li>
    </ul>
  </li>
</ul>

Regardless of whether it’s from the hard-coded list or the JSON feed, the output is the same, and works fine. The problem is that the HTML markup is laid out in a way that I can’t, or can’t figure out how to, use CSS child selectors to select the 2nd-level ul’s, because these ul’s are at the bottom of the page (final HTML output) nested inside a bunch of divs which have no way of being uniquely identified. (Their jqxMenu-generated ID’s change on every page load.) The final page is something like this:

<header><nav>
<div id="jqxMenu">
  <div something something>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</div>
</nav></header>
<!-- rest of page -->
<footer><!-- footer stuff --></footer>
<div class="jqx-menu-popup jqx-something jqx-etc">
<div>
  <ul>
    <li>i2Sub1</li>
    <li>i2Sub2</li>
  </ul>
</div>
</div>
<div class="jqx-menu-popup jqx-something jqx-etc">
<div>
  <ul>
    <li>i4Sub1</li>
    <li>i4Sub2</li>
    <li>i4Sub3</li>
  </ul>
</div>
</div>

I can’t find an easy way to select the ul’s that correspond to the i2Sub and i4Sub items. Each dropdown needs a different background color, text color, highlighted bg and highlighted text color. I cannot put ID’s into the ul’s either. I cannot simply use .jqx-menu-popup:nth-child() here because there are other jqxWidgets’ dropdowns populating the bottom of the page.

Thanks.

[Author]

Posts