UI Menu not expanding child elements

[John]

I've tried both adding the menu items as a json object and directly as li/ul elements in the html code.

I just can't seem to get the menu to expand....

<div id="example" class="k-content">

   <div id="megaStore">

     <ul id="kendoMenu">

       <li>Products

         <ul>

           <li>Furniture

             <ul>

               <!-- moving the UL to the next line will cause an IE7 problem -->

               <li>Tables & Chairs</li>

               <li>Sofas</li>

               <li>Occasional Furniture</li>

               <li>Childerns Furniture</li>

               <li>Beds</li>

             </ul>

           </li>

           <li>Decor

             <ul>

               <!-- moving the UL to the next line will cause an IE7 problem -->

               <li>Bed Linen</li>

               <li>Throws</li>

               <li>Curtains & Blinds</li>

               <li>Rugs</li>

               <li>Carpets</li>

             </ul>

           </li>

           <li>Storage

             <ul>

               <!-- moving the UL to the next line will cause an IE7 problem -->

               <li>Wall Shelving</li>

               <li>Kids Storage</li>

               <li>Baskets</li>

               <li>Multimedia Storage</li>

               <li>Floor Shelving</li>

               <li>Toilet Roll Holders</li>

               <li>Storage Jars</li>

               <li>Drawers</li>

               <li>Boxes</li>

             </ul>

           </li>

           <li>Lights

             <ul>

               <!-- moving the UL to the next line will cause an IE7 problem -->

               <li>Ceiling</li>

               <li>Table</li>

               <li>Floor</li>

               <li>Shades</li>

               <li>Wall Lights</li>

               <li>Spotlights</li>

               <li>Push Light</li>

               <li>String Lights</li>

             </ul>

           </li>

         </ul>

       </li>

       <li>Stores

         <ul>

           <li>

             <div id="template" class="k-content" style="padding: 10px;">

               <h2>

                 Around the Globe</h2>

               <ol>

                 <li>United States</li>

                 <li>Europe</li>

                 <li>Canada</li>

                 <li>Australia</li>

               </ol>

               <img src="../../content/web/menu/map.png" alt="Stores Around the Globe" />

               <button class="k-button">

                 See full list</button>

             </div>

           </li>

         </ul>

       </li>

       <li>Blog </li>

       <li>Company </li>

       <li>Events </li>

       <li disabled="disabled">News </li>

     </ul>

   </div>

 </div>

 <script type="text/javascript">

 

   $(document).ready(function () {

 

     $("#kendoMenu").kendoMenu();

   });

[Captain Awesome]

John, I had this issue as well.

Adding a reference to jquery-1.7.1.min.js resolved this issue for me.