Edit in JSFiddle

(function () {

    var menuData = {
        "menu":[
            {
                "title" : "Game",
                "submenu" : [
                    {
                        "title":"Cool Games",
                        "uri": "#"
                    },
                    {
                        "title":"More Cool Games",
                        "uri":"#"
                    }
                ],
                "uri" : "#"
            },
            {
                "title" : "Community",
                "uri" : "#"
            },
            {
                "title" : "Media",
                "submenu" : [
                    {
                        "title":"Cool Media",
                        "uri": "#"
                    },
                    {
                        "title":"More Cool Media",
                        "uri":"#"
                    }
                ],
                "uri" : "#"
            },
            {
                "title" : "Forums",
                "submenu" : [
                    {
                        "title":"Gameplay",
                        "submenu" : [
                            {
                                "title":"Cool Gameplay",
                                "uri": "#"
                            },
                            {
                                "title":"More Cool Gameplay",
                                "uri":"#"
                            }
                        ],
                        "uri": "#"
                    },
                    {
                        "title":"Classes",
                        "submenu" : [
                            {
                                "title":"Barbarian",
                                "uri": "#"
                            },
                            {
                                "title":"Demon Hunter",
                                "uri":"#"
                            },
                            {
                                "title":"Monk",
                                "uri":"#"
                            },
                            {
                                "title":"Witch Doctor",
                                "uri":"#"
                            },
                            {
                                "title":"Wizard",
                                "uri":"#"
                            }
                        ],
                        "uri":"#"
                    },
                    {
                        "title":"Beta",
                        "submenu" : [
                            {
                                "title":"Cool Beta",
                                "uri": "#"
                            },
                            {
                                "title":"More Cool Beta",
                                "uri":"#"
                            }
                        ],
                        "uri":"#"
                    },
                    {
                        "title":"Support",
                        "submenu" : [
                            {
                                "title":"Cool Support",
                                "uri": "#"
                            },
                            {
                                "title":"More Cool Support",
                                "uri":"#"
                            }
                        ],
                        "uri":"#"
                    }
                ],
                "uri" : "#"
            },
            {
                "title" : "Services",
                "submenu" : [
                    {
                        "title":"Cool Services",
                        "uri": "#"
                    },
                    {
                        "title":"More Cool Services",
                        "uri":"#"
                    }
                ],
                "uri" : "#"
            }
        ]
    };

    function menuElem(obj, el) {
        for (var i = 0; i < obj.length; i++) {

            var menuElement = document.createElement("li");
            el.appendChild(menuElement);

            var menuLink = document.createElement("a");
            menuLink.setAttribute("href", obj[i].uri);
            menuLink.setAttribute("title", obj[i].title);

            var arrow = document.createElement("div");
            arrow.className = 'arrow';
            arrow.innerHTML = '>';

            var title = document.createElement("div");
            title.className = 'title';
            title.innerHTML = obj[i].title;

            menuLink.appendChild(title);

            if (typeof obj[i].submenu != 'undefined') {
                menuLink.className = 'subMenuLink';
                menuLink.appendChild(arrow);
            }

            menuElement.appendChild(menuLink);

            if (typeof obj[i].submenu != 'undefined') {
                var subMenu = document.createElement("ul");
                subMenu.className = 'subMenu';

                var properties = {submenu : obj[i].submenu, subMenuEl : subMenu, menuEl : menuElement};

                menuLink.properties = properties;

                openSubMenu(menuLink);
            }
        }
    }

    function openSubMenu(el) {
        el.addEventListener("click", function(ev){
            ev.stopPropagation();

            var subMenus = ev.target.parentNode.parentNode.parentNode.getElementsByTagName("ul");

            var links = ev.target.parentNode.parentNode.parentNode.getElementsByClassName('subMenuLink');

            for (var i = 1; i < subMenus.length; i++) {
                subMenus[i].parentNode.removeChild(subMenus[i]);
            }

            for (var i = 0; i < links.length; i++) {
                links[i].style.color = "#A36220";
            };

            this.style.color = "#DBC195";

            this.properties.subMenuEl.innerHTML = "";
            this.properties.menuEl.appendChild(this.properties.subMenuEl);
            menuElem(this.properties.submenu, this.properties.subMenuEl);
        });

    };

    return menuElem(menuData.menu, document.getElementById("menu"));

})();

<div id="container">
    <ul id="menu" class="menu"></ul>
</div>

body{
    font-size: 12px;
    font-family:"Arial", Arial, sans-serif;
}

#container {
    width: 150px;
}

#container ul {
    margin: 0px;
    padding: 0px;
}

#container li {
    list-style: none;
    position: relative;
}

li {
    border: 1px solid #292827;
    background-color: black;
    width: 120px;
    height: 20px;
    padding: 0 9px 0 9px;
}

#container a {
    color: #A36220;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 20px;
    text-indent: 3px;
    text-decoration: none;
    width: 100%;
}

div {
    vertical-align: middle;
}

.arrow {
    float:right;
}

.title {
    float:left;
}

ul.subMenu li {
    float:left;
}

li .subMenu {
    display: block;
    position: absolute;
    left: 139px;
    top: -1px;
}