Question

I created a nice little menu with mouseovers and a drop down menu.

The navigation code is simple:

        <ul class="menu" id="menu">
        <li><a href="#" class="menulink" id="home">Home</a></li>
        <li><a href="#" class="menulink" id="about">About</a>
            <ul>
                <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a href="#" class="menulink" id="portfolio">Portfolio</a></li>
        <li><a href="#" class="menulink" id="maintenance">Maintenance</a></li>
        <li><a href="#" class="menulink" id="testimonials">Testimonials</a></li>
        <li><a href="#" class="menulink" id="contact">Contact Us</a></li>
    </ul>

In isolation it works as it should: http://www.rouviere.com/nav/

However, when I put it in place: http://www.rouviere.com/jr/ the drop down menu under About stays hidden.

I would appreciate a helping hand here to figure out why the drop down menu doesn’t show.

Thanks.

Answer 1

In the line p=h.getElementsByTagName('a')[0] you are referring to the About link by index. This works on your test page, but your real page has a new anchor tag on the main logo, which comes before the About link in the HTML. You should give your About link an id attribute and refer to it in your JavaScript.