Question

i have the menu structure like below,

<ul>

<li style="background-image:ur('open.gif');">
      <ul class="sub-menu">
         ...........
      </ul>
</li>

<li>
      <ul class="sub-menu">
         ...........
      </ul>
</li>

<li>
      <ul class="sub-menu">
         ...........
      </ul>
</li>
</ul>

the first li which has style=”background-image:ur(‘open.gif’);” is displayed with dropdown now.

if i click in other li’s the style will apply that li’s also style=”background-image:ur(‘open.gif’);”

Now two li’s display it’s dropdown li’s.

i Need to do is if one li is set with style=”background-image:ur(‘open.gif’);” this one. if i click another li, i need to set previous li’s UL style display:none which is with style style=”background-image:ur(‘open.gif’);”.

How can i do this?

Answer 1

You better add a class “open” to the LI and handle the URL with CSS.

Example with JS:

$(function(){
    $("#menu").children().hover(function(){
        $(this).addClass("open");
    },
    function(){
        $(this).removeClass("open");
    });
});

CSS

#menu li
{
    background-image:url('closed.gif');
}

#menu li.open
{
    background-image:url('open.gif');
}

Example without JS

#menu li ul
{
    display: none;
    background-image:url('closed.gif');
}
#menu li:hover ul
{
    display: block;
    background-image:url('open.gif');
}