Thanks for your help Nicole

Let me try and explain what I am trying to build more effectively, the current menu renders like this:

          A basic version of the file structure of the menu items. Sub menu items diabled in this one to give the above appearance:

If the sub menu items, which I want to collapse in and out, are enabled then the below result occurs, a cogested menu.

What I am trying to replicate is something that follows the design in place with similar functions to: http://dev.danen.org/demo/danen/jquery/collapsible_menu.htm# Im trying out your code and think I have come up with something however when I try to edit the css code in the stylesheets folder it decides to change the code for me.

The code I have adapted from yours is:

/* Dynamic menu */

#navigation ul {

    list-style-type: none;

    margin-left: -5px;

    padding: 0px;

    width: 200px;

}

#navigation li {

    position: relative;

}

#navigation li a {

    font-family: helvetica, arial, sans-serif;

    text-indent: 10px;

    font-size: 13px;

    line-height: 18px;

    color: white;

    text-decoration: none;

    font-weight: bold;

    color: #fff;

    cursor: pointer;

    display: block;

    height: 25px;

    line-height: 25px;

    width: 100%;

    position: relative;

}

#navigation li ul {

    left: -999em;

    position: absolute;

}

#navigation li a:hover {

background-image: url(/images/navbg.jpg);

        background-repeat: no-repeat;

}

#navigation li:hover > ul {

    left: 200px;

    position: absolute;

    top: 0;

}

However

When I update my stylesheet after testing in firefox's editor (although I cannot test the depth just the initial style) it just reverts back to the original, or refuses to render the changes.

Any thoughts much appreciated.

Matt

Thanks but the content there goes over my head I'm afraid. I cannot work out where the menu module templates are to find the correct file structure.

Thanks Chad this looks good, your example is pretty much exactly what I am after, want to adapt the styling slightly. When inserting the jquery you have supplied how is best to go about this? Should I make a new stylesheet and link to it or can I put it in the current style after the #navigaion code? To be honest I have no idea how its best used as the dynamic menu builder seems to do all the code inserting.

The changes from the css I adapted from Nicoles came through at some point before I got into work this morning. The changes had made a drop down to the right of the main menu although it was not really visible because of the layout of the page. Guess it did just needed some time.

Thanks all

Sorry Chad, while that bit makes sense, as I am unfamiliar with BC, I don't know how to affect the entire code of the menu. I just put the menu items on the dynamic menu building function and that builds the menu html into the template for the site. I only know how to edit the stylesheet that has the original css from above. Which I have now edited to my own highly unefficient design but is not vey useful (see below). I have the original though.

I think my menu is wrapped in a div already: #navigation. With a css class of navquarsh (not sure what that means exactly). Dont mean to sound ignorant but I am really new to this. The site is www.quarsh.com btw.

<!-- Column 2 start LEFT NAVIGATION-->

        <div id="navigation">

        <script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><!-- Dynamic Menu Begin CSS Output --><div id="cat_642957_divs"><ul id="nav_642957"><li class="navquarsh" style="width:190px;height:30px;"><a href="/home">Home</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="/quarsh_services.html">Quarsh Services</a><ul id="navsub_642957_1040688"><li class="navquarsh" style="width:190px;height:30px;"><a href="/recruitment_process_improvement.html">Recruitment Improvement</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="/executive_search.html">Executive Search</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="rpo.html">RPO</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="/talent_warehousing.html">Talent Warehousing</a></li></ul></li><li class="navquarsh" style="width:190px;height:30px;"><a href="/why_quarsh.html">Why Quarsh</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="/experience.html">Experience &amp; Case Studies</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="http://www.quarsh.com/quarsh_news_media_jobs.html">News, Media and Jobs</a></li><li class="navquarsh" style="width:190px;height:30px;"><a href="/contact.html">Contact Us</a></li></ul></div><script type="text/javascript">catSetSelectedCSSItem('nav_642957');</script><!-- Dynamic Menu End CSS Output -->

        </div>

Thanks Chad I got it up and running as I wanted, currently taken it down whilst I ammend all the pages and menu accordingly. Thanks a lot for your help!