View Full Version : Help with Hover root item only

12-06-2009, 11:36 AM

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

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

$('#smoothmenu1 li').hover(
function() {
function() {
}).click (function () {


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

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


12-06-2009, 11:50 AM
Try adding a css class to the root li. For example <li class="root"> and then do this:

$('#smoothmenu1 li.root').append('<div class="hover"></div>');