This is a migrated thread and some comments may be shown as answers.
UI Menu not expanding child elements
1 Answer 56 Views
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 29 Feb 2012, 02:39 PM
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();
   });


1 Answer, 1 is accepted

Sort by
0
Captain Awesome
Top achievements
Rank 2
answered on 02 Mar 2012, 05:59 PM
John, I had this issue as well.

Adding a reference to jquery-1.7.1.min.js resolved this issue for me.
Tags
Menu
Asked by
John
Top achievements
Rank 1
Answers by
Captain Awesome
Top achievements
Rank 2
Share this question
or