UI Menu not expanding child elements

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Feb 2012

    Posted 29 Feb 2012 Link to this post

    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();
       });


  2. Software Developer Austin
    Software Developer Austin avatar
    5 posts
    Member since:
    Dec 2008

    Posted 02 Mar 2012 Link to this post

    John, I had this issue as well.

    Adding a reference to jquery-1.7.1.min.js resolved this issue for me.
  3. Kendo UI is VS 2017 Ready
Back to Top