up vote -3 down vote favorite

can someone fix my javascript or css. i cannot make changes to the html because its being displayed dynamically. i need it so that when i hover over a top level the submenu silds down into place.

html

    <div id="n" class="nav">

            <div class="menu">
<ul>
<li class="page_item page-item-5 current_page_item"><a href="http://www.webcarepreview.co.uk/mandalandscaping/" title="Home">Home</a></li>
<li class="page_item page-item-2"><a href="http://www.webcarepreview.co.uk/mandalandscaping/about/" title="Our Services">Our Services</a>
<ul class="children">
<li class="page_item page-item-16">
<a href="http://www.webcarepreview.co.uk/mandalandscaping/about/maintenance/" title="Maintenance">Maintenance</a></li>
<li class="page_item page-item-125"><a href="http://www.webcarepreview.co.uk/mandalandscaping/about/nidagravel/" title="Nidagravel">Nidagravel</a></li>
<li class="page_item page-item-213"><a href="http://www.webcarepreview.co.uk/mandalandscaping/about/timber-tech/" title="Timber Tech">Timber Tech</a></li>
</ul></li>
<li class="page_item page-item-7"><a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/" title="Galleries">Galleries</a>
<ul class="children">
<li class="page_item page-item-76">
<a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-1/" title="Garden 1">Garden 1</a></li>
<li class="page_item page-item-104"><a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-2/" title="Garden 2">Garden 2</a></li>
<li class="page_item page-item-134"><a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-3/" title="Garden 3">Garden 3</a></li>
<li class="page_item page-item-209"><a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/decking/" title="Garden 4">Garden 4</a></li>
</ul></li>
<li class="page_item page-item-10"><a href="http://www.webcarepreview.co.uk/mandalandscaping/watch-video/" title="Project Videos">Project Videos</a></li>
<li class="page_item page-item-8"><a href="http://www.webcarepreview.co.uk/mandalandscaping/staff-profile/" title="About Us">About Us</a></li>
<li class="page_item page-item-6"><a href="http://www.webcarepreview.co.uk/mandalandscaping/contact/" title="Contact">Contact</a></li>
</ul>
</div>

</div>

CSS

#n
{
    margin: 0;
    padding: 0;
    background-color:#999999;                   /* -- Your Background color remember the "#" -- */
    height:30px;                                /* -- change navegation height -- */
    width: 878px;                               /* -- change to the size of your canvis recomend same size as header image -- */
    margin-left:auto;
    margin-right:auto;

}

#n ul
{
    margin: 0;/* DO NOT CHANGE */
    padding: 0;/* DO NOT CHANGE */
    line-height: 30px;                          /* -- MAKE SAME AS "#n ul li a" height !!! -- */
}

#n li
{
    margin: 0;/* DO NOT CHANGE */
    padding: 0;/* DO NOT CHANGE */
    list-style:none;/* DO NOT CHANGE */
    float:left;/* DO NOT CHANGE */
    position:relative;/* DO NOT CHANGE */
    background-color:#999999;
}
#n ul li a
{
    text-align:center;                          /* -- aligns your link text -- */
    text-decoration:none;                       /* -- gets rid of underline on menu links -- */
    font-family:Arial, Helvetica, sans-serif;       /* -- Change fot to suit your Theme -- */
    height:30;
    width:150;
    display:block;/* DO NOT CHANGE */
    color:#FFF;
    font-size: 18px;
}

#n ul ul 
{
    position:absolute;/* DO NOT CHANGE */
    visibility:hidden;/* DO NOT CHANGE */
    top:30px;                                   /* -- MAKE SAME AS "#n ul li a" height !!! -- */
    z-index:999999;/* DO NOT CHANGE */
}



#n li:hover
{
    background-color:#f1645e;                   /* -- Parent hover color --*/
}

#n ul li:hover ul li a:hover                    /* -- Sub item options -- */
{
    background-color:#cccccc;                   /* -- Sub item hilight color -- */
    color:#000000;                              /* -- Sub item tect color -- */
}

javascript

<script>
$(document).ready(function(){  

$("div.menu > ul > li").hover(function (){
    $("div.menu > ul > li > ul").slideToggle("slow");})

}); 
</script>
share|improve this question
feedback

closed as not a real question by Pekka 웃, Aron Rotteveel, Bobby, Gary Green, Abizern Jun 3 '11 at 12:27

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, see the FAQ.

1 Answer

up vote 1 down vote

You should really check out how jQuery uses current objects and dom elements. I'd guess your current solution expands everything when you hover?

This snippet should get you going in the rite direction:

$('div.menu ul li').hover( function() {
$(this).children('ul').toggle();
}, function() {
$(this).children('ul').toggle();
}

Please note I wrote this in the stackoverflow text editor so watchout for typos.

share|improve this answer
hi there i tied your suggestion but nothing. at all – rikki ewan Jun 3 '11 at 11:14
feedback

Not the answer you're looking for? Browse other questions tagged or ask your own question.