Problem with looping thru a html page

programming web dev
1

Hi,

I trying to build a menu build out of an unordered list. There for I have the following html code:


<ul id="nav">
        <li>Sunfishes 
          <ul>
            <li><a href="">Blackbanded sunfish</a></li>
            <li><a href="">Shadow bass</a></li>
            <li><a href="">Ozark bass</a></li>
            <li><a href="">White crappie</a></li>
          </ul>
        </li>

        <li>Grunts 
          <ul>
            <li><a href="">Smallmouth grunt </a></li>
            <li><a href="">Burrito</a></li>
            <li><a href="">Pigfish</a></li>
          </ul>
        </li>

        <li>Remoras 
          <ul>
            <li><a href="">Whalesucker</a></li>
            <li><a href="">Marlinsucker</a></li>
            <li><a href="">Ceylonese remora</a></li>
            <li><a href="">Spearfish remora</a></li>
            <li><a href="">Slender suckerfish</a></li>
          </ul>
        </li>
        <li>About </li>
</ul>

Accessing the menu bar works fine. document.getElementById(“Nav”).childNodes

But now I’m trying to access the childnodes of a menubar item but unfortunately javascript doesn’t allows two childnodes next to eachother.

document.getElementById(“Nav”).childNodes.chilNodes

So this causes my problem with accessing the inner menu items. Is there someone with a suggestion?