kendo menu

by antouank

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<div id="example" class="k-content">
    <div id="megaStore">
        <ul id="menu">
            <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>
            ...

CSS

#megaStore {
     width: 600px;
     margin: 30px auto;
     padding-top: 120px;
     background: url('../../content/web/menu/header.jpg') no-repeat 0 0;
 }
 #menu h2 {
     font-size: 1em;
     text-transform: uppercase;
     padding: 5px 10px;
 }
 #template img {
     margin: 5px 20px 0 0;
     float: left;
 }
 #template {
     width: 380px;
 }
 #template ol {
     float: left;
     margin: 0 0 0 30px;
     padding: 10px 10px 0 10px;
 }
 #template:after {
     content:".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
 }
 #template .k-button {
     float: left;
     clear: left;
     margin: 5px 0 5px 12px;
 }

JavaScript

$(document).ready(function () {
    $("#menu").kendoMenu();

});