Expandable menu with links using colorbox?

JavaScript
1

Hi,

I am trying to create an expandable menu using the code from JQuery Novice to Ninja and have the links in the expanded section linking to an external page via colorbox.

It seems the two scripts are conflicting and only one will work if the other is removed but I can’t seem to get both to work together.

I am kind of new to Jquery/Javascript so any help would be appreciated, thanks!

Here is a sample of the Javascript:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( '#menu > li > ul' )
	.hide()
	.click(function( e ){
		e.stopPropagation();
	});
  $('#menu > li').toggle(function(){
	  $(this).find('ul').slideDown();
  }, function(){
  	$( this ).find('ul').slideUp();
  });
});

		$(document).ready(function(){
			//assign the ColorBox event to element
			
			$(".lightbox").colorbox({width:"80%", height:"80%", iframe:true});
			
			});
			
			
	</script>

And the HTML for the menu:


<ul id="menu">
        <li><a href="#">What's new?</a>
          <ul class="active">
            <li><a href="http://www.google.com" class="lightbox">Weekly specials</a></li>
            <li><a href="http://www.google.com" class="lightbox">Last night's pics!</a></li>
            <li><a href="http://www.google.com" class="lightbox">Users' comments</a></li>
          </ul>
        </li>
        <li><a href="#">Member extras</a>
          <ul>
            <li><a href="#">Premium Celebrities</a></li>
            <li><a href="#">24-hour Surveillance</a></li>
          </ul>
        </li>
        <li><a href="#">About Us</a>
          <ul>
            <li><a href="#">Privacy Statement</a></li>
            <li><a href="#">Terms and Conditions</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </li>
      </ul>