3 column layout

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-3 col-sm-4">
            <ul id="menu"></ul>
        </div>
        <div class="col-xs-6 col-sm-4" id = "mainArticle"></div>
        <div class="col-xs-3 col-sm-4">
             <h3>Related Articles</h3>

            <ul>
                <li><a href="#">Nature Photography</a>

                </li>
                <li><a href="#">Tilt Shift Technique</a>

                </li>
                <li><a href="#">Night Time Photography</a>

                </li>
            </ul>
            <div id='normalDialog'>
                <input type="button" value="Login">
                <!-- Modal Dialog Div -->
                <div id="dialog-confirm"></div>
            </div>
        </div>

CSS

ul li {
    list-style-type: square;
    text-decoration:none;
}
#menu {
    position: relative;
    top: 30px;
}
.ui-menu {
    width: 150px;
    z-index: 1000;
}

JavaScript

//You're in window.onload, so you don't need to use $(function() { [...] })
var data = {
    menu: [{
        name: 'Cost',
        link: '0',
        sub: [{
            name: 'Digital',
            link: '0-0',
            sub: null
        }, {
            name: 'Film',
            link: '0-1',
            sub: null
        }, {
            name: 'Processing',
            link: '0-2',
            sub: null
        }]
    }, {
        name: 'Digital',
        link: '1',
        sub: [{
            name: 'Cameras',
            link: '1-0',
            sub: null
        }, {
            name: 'Memory',
            link: '1-1',
            sub: null
        }, {
            name: 'HDR',
            link: '1-2',
            sub: null
        }]
    }, {
        name: 'Film',
        link: '2',
        sub: [{
            name: 'Types',
            link: '2-0',
            sub: null
        }, {
            name: 'Processing',
            link: '2-1',
            sub: null
        }, {
            name: 'ISO',
            link: '2-2',
            sub: null
        }]
    }, {
        name: 'Filters',
        link: '3',
        sub: [{
            name: 'Infrared',
            link: '3-0',
            sub: null
        }, {
            name: 'UV',
            link: '3-1',
            sub: null
        }, {
            name: 'Digital',
            link: '3-2',
            sub: null
        }]
    }, {
        name: 'Process',
        link: '4',
        sub: [{
            name: 'Digital',
            link: '4-1',
            sub: null
        }, {
            name: 'Film',
            link: '4-2',
            sub: null
        }, {
            name: 'History',
            link: '4-3',
            sub: null
        }]
    }],
    mainArticle: {
        heading: "Photography",
        article: "This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a...