[jQuery] Help with appending div to root item only

[Valkesh]

Hi

Ive got my menu displayed on this site http://valkesh.000space.com.
The issue I am having is that I want the hover image (red part) to be
displayed only when hovering the root li, and not all subsequent li
items in the menu.. because as you may see now, even when hovering the
li in the submenu the red gets displayed.

The code I am using is the following

[CODE]
<script type="text/javascript">
$(document).ready(function () {
        $('#smoothmenu1 li').append('<div class="hover"></div>');

        $('#smoothmenu1 li').hover(
                function() {
                        $(this).children('div').fadeIn('500');
                },
                function() {
                        $(this).children('div').fadeOut('500');
        }).click (function () {
                $(this).addClass('selected');
        });
});
</script>
[/CODE]

and

[CODE]
<div id="smoothmenu1" class="menu">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a>
            <ul>
                <li><a href="#">2.1</a>
                <ul>
                    <li><a href="#">2.1.1</a></li>
                </ul>
                </li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
        </ul>
        </li>
        <li><a href="#">Page 3</a>
            <ul>
                <li><a href="#">3.1</a></li>
                <li><a href="#">3.2</a></li>
                <li><a href="#">3.3</a></li>
            </ul>
            </li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>
[/CODE]

Is there a way to specify in the javascript functionality where to
append the div to only the root li item?

Thanks