Вывод подпунктов меню Javascript

[Vempel]

Код javascript:

<script type="text/javascript">
function openMenu(node) {
var style,
subMenu = node.parentNode.getElementsByTagName("ul")[0]; 
if ( subMenu.ownerDocument && subMenu.ownerDocument.defaultView ) {
style = subMenu.ownerDocument.defaultView.getComputedStyle( subMenu, null );
} else if ( subMenu.currentStyle ) {
style = subMenu.currentStyle;
}
style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>

Необходимо вывести горизонтальное меню с подпунктами. В моем случае подпункты выводятся всегда в одном месте накладываются друг на друга и сползает основное меню. Можно ли задать стили конкретно каждому подпункту через Javascript.
CSS файл

.menu {
border: 1px solid green;
height:40px;
background-color: red;
}
.menu li ul{display:none;}
.menu li
{
padding:40px;
margin-top:-80px;
margin-left: -45px;
display: inline-block;
}

.menu li a{
color:#000;
font-family:verdana,arial,sans-serif;
text-decoration:none;
}
.menu li a:hover {
color: #ffffff; /* Цвет текста активного пункта */
}
.mend li ul
{
padding:0;
margin:0;
list-style-type:square;
list-style-position:inside;
}
.mend li ul li{
position: relative; 
width: 50px;
height: 100px;
border:2px solid black;
list-style-type:square;
color:#fff;
list-style-position:inside
}