Jquery Lavalamp sub menu

Jquery Lavalamp sub menu

I am trying to add a submenu to a Jquery lavalamp, but i dont know how.
This is what i made so far. The only thing left i think is to set hover over submenu items.

code:

HTML:
  1. <ul class="lavaLampWithImage" id="lava_menu">
  2.     <li><a href="#">Menu 1</a> </li>
  3.     <li><a href="#">Menu 2</a>
  4.         <ul class="sub-menu">
  5.             <li>
  6.                 <a href="#">Sub Menu 1</a>
  7.                 <a href="#">Sub Menu 2</a>
  8.                 <a href="#">Sub Menu 3</a>
  9.             </li>
  10.         </ul>
  11.     </li>
  12.     <li><a href="#">Menu 3</a></li>
  13. </ul>
CSS:

  1. .lavaLampWithImage {
  2.   position: relative;
  3.   height: 35px;
  4.   padding: 0 5px 15px 0;
  5.   margin: 35px 0 0 0;
  6.   float: right;
  7. }

  9. .lavaLampWithImage li {
  10.   float: left;
  11.   list-style: none;
  12.   max-width: auto;
  13.   position: relative;
  14.   list-style-type: none;
  15.   display: inline-block;
  16. }

  18. .lavaLampWithImage li.back {
  19.   background: #33D2FF;
  20.   height: 30px;
  21.   margin-top: 8px;
  22.   z-index: 8;
  23.   position: absolute;
  24.   border-radius: 7px 7px 7px 7px;
  25.   -moz-border-radius: 7px 7px 7px 7px;
  26.   -webkit-border: 7px 7px 7px 7px; 
  27. }

  29. .lavaLampWithImage ul.sub-menu li{
  30.   background: #33D2FF;
  31.   height: 30px;
  32.   margin-top: 8px;
  33.   z-index: 8;
  34.   position: absolute;
  35.   border-radius: 7px 7px 7px 7px;
  36.   -moz-border-radius: 7px 7px 7px 7px;
  37.   -webkit-border: 7px 7px 7px 7px; 
  38. }
  39. .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited{
  40.   border: none;
  41. }

  43. .lavaLampWithImage ul.sub-menu {
  44.   padding:0;
  45.   margin: 0;
  46.   
  47. }
  48. .lavaLampWithImage ul.sub-menu li {
  49.    list-style-type: none;
  50.    display: inline-block;
  51.    
  52. }

  54. .lavaLampWithImage li a {
  55.   font: normal 100% 'News Cycle', sans-serif;
  56.   text-shadow: none;
  57.   text-decoration: none;
  58.   color: #FFF;
  59.   outline: none;
  60.   text-align: center;
  61.   letter-spacing: 0;
  62.   z-index: 10;
  63.   float: left;
  64.   line-height: 35px;
  65.   padding: 5px 0 5px 0;
  66.   position: relative;
  67.   margin: auto 16px;  
  68. display: inline-block;
  69.  width:100px;
  70. } 

  72. .lavaLampWithImage li ul.sub-menu li a {
  73. font: normal 100% 'News Cycle', sans-serif;
  74.   text-shadow: none;
  75.   text-decoration: none;
  76.   color: #FFF;
  77.   outline: none;
  78.   text-align: center;
  79.   letter-spacing: 0;
  80.   z-index: 10;
  81.   float: left;
  82.   line-height: 35px;
  83.   padding: 5px 0 5px 0;
  84.   position: relative;
  85.   margin: auto 16px;  
  86. display: inline-block;
  87.  width:150px;
  88.  
  89. }

  91. /*sub menu*/
  92. .lavaLampWithImage li ul.sub-menu {
  93.     display:none;
  94.     position: absolute;
  95.     top: 30px;
  96.     left: 0;
  97.     width: 100px;

  99. }
  100. .lavaLampWithImage li:hover ul.sub-menu {
  101.     display:block;
  103. }
jquery.lavalamp.min.js:

  1. (function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li = $(".mainNav", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);