Polymer 1.0 styling not working - css

Question

I want to create category list with sub category. The sub category will open when user clicks on the parent category. This is like a multi level menu tree.
The functionality works fine, but the style for the child nodes is not applying. The reason is that I create the sub menu dynamically and I cannot set the style rules.
Here is my code:
<template>
<div id="cat_menu">
<!--<category-service id="service" categories="{{categories}}"></category-service>-->
<iron-ajax id="ajax"
auto
url="../api/index.php"
method="POST"
last-response="{{categories}}"
params='{"tag":"get_cat_list"}'
handleAs="json">
</iron-ajax>
<template is="dom-repeat" items="{{categories.cat_list}}" filter="getParent" id="t">
<paper-fab mini id="fab_{{item.category_id}}" icon="edit" class="p_fab"></paper-fab>
<paper-menu id="{{item.category_id}}" class="cat_item" on-click="selectAction">
<span >{{item.category_name}}</span>
</paper-menu>
</template>
<div>
</template>
selectAction: function (e, detail) {
var str = '';
if (detail) {
var selectedItem = e.currentTarget;
//Polymer.dom(selectedItem).childNodes[1].innerHTML = '';
for (var i = 0; i < this.categories.cat_list.length; i++) {
//var item = new Object;
var item = this.categories.cat_list[i];
if (selectedItem.id == item.parent_id) {
var container = document.createDocumentFragment();
var paper_submenu = document.createElement('paper-menu');
paper_submenu.id = item.category_id;
paper_submenu.innerText = item.category_name;
paper_submenu.className = 'cat_item';
//paper_submenu.classList.add('cat_item');
paper_submenu.onclick = 'selectAction';
Polymer.dom(selectedItem.childNodes[1]).appendChild(paper_submenu);
Polymer.updateStyles();
}
}
}
}
CSS Style:
.cat_item {
border: 1px solid #acdcd8;
margin: 5px;
background-color: rgb(255, 255, 255);
padding-left: 10px;
}
The element cannot see this class cat-item. Can someone please help me solve this?