Hey,
you can create the sub menu by using the menu manager (Appearance > Menu). Assign the sub menu to the right theme location. Then add following code to css/custom.css:
/************************************************************************
SUB Navigation
*************************************************************************/
/*first level*/
.sub_menu {
position: relative;
z-index: 130;
font-size: 11px;
float: left;
line-height: 41px;
height: 40px;
}
.sub_menu>ul{
position: relative;
top:14px;
left:-10px;
}
.boxed .sub_menu>ul{left:-10px;}
.sub_menu li{
float:left;
position: relative;
padding:0 10px;
border-right-style: solid;
border-right-width: 1px;
line-height: 10px;
}
.sub_menu>ul>li:last-child, .sub_menu>div>ul>li:last-child{
border:none;
padding-right: 0;
}
/*second level*/
#top .sub_menu li ul{
display: none;
position: absolute;
width:170px;
padding:10px 0 0 0;
z-index: 101;
-moz-box-shadow: 0 8px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.1);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
left:0;
border:none;
margin: 0;
font-size: 11px;
}
.sub_menu li:hover>ul{
display:block;
}
.sub_menu>ul>li:hover>a{
text-decoration: none;
}
.sub_menu li li{
float:none;
line-height: 20px;
border:none;
padding:0;
margin:0;
border-top-style: solid;
border-top-width: 1px;
}
#top .sub_menu li li a{
display:block;
text-decoration: none;
padding:7px 9px;
border-top: none;
}
#top .sub_menu li li a:hover{
text-decoration: none;
}
/*third level and deeper*/
.sub_menu li li ul{
top:-1px;
left:169px;
background: none;
padding: 0;
}