عمودی کردن استایل زیرمنوهای یک منوی افقی در قالب

[عمودی کردن استایل زیرمنوهای یک منوی افقی در قالب]

سلام.
وقت بخیر. من یک قالب فارسی دارم که sub menu ها در اون، بصورت ردیفی (افقی ) هستند. می خواهم بصورتی عمودی (ستونی) بشن. باید چیکار کنم؟!

اینم کدهای css منوهای قالب:

/*-- منوی اصلی--*/
.main-menu{
line-height:28px;
direction: rtl;
padding-right: 5px;
overflow: hidden;
height:28px;
margin: 0 auto;
width:98%;
background: #fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.main-menu ul{direction: rtl;margin: 0;padding: 0;}
.main-menu li{direction: rtl;display: inline-block;list-style: none;font-size:16px;font-weight: normal;text-align: center;padding-bottom: 0;height: auto !important;position: unset;height: 30px;margin-bottom: 0;}
.main-menu li.active a{background: none !important;font-size: 15px;color: #f00;font-family: "IRANSansWeb_Light";}
.main-menu li:hover>ul{visibility: visible;opacity: 1;color:#f00;}
.main-menu li a{font-family:"IRANSansWeb_Light";font-size: 12px;}
.main-menu li::after{content: " | ";color: #eee;font-size: 12px;padding-left:2px}
.main-menu li.menu-item-has-children::after{font-family: 'FontAwesome';content: "\f0d7  | ";color: #eee;font-size: 12px;padding-left:2px;float: left;}
.main-menu li>ul>li.menu-item-has-children::after{content: "";}
.main-menu ul>li:nth-last-child(1).menu-item-has-children::after{content: "\f0d7";}
.main-menu li:nth-last-child(1)::after{content: none;}
.main-menu li a{color: #555;padding: 5px;display:inline-block;opacity: 1;text-align: center;line-height:18px}
.main-menu li.menu-item-has-children:hover>a{color:#f00;opacity: 1;}
.main-menu li a:hover{color:#f00;}
.main-menu li>ul>li>a{box-shadow: none !important;}
.main-menu li.menu-item-has-children span.sub-arrow{float: left;margin-left: 0;color: transparent;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
.rotatee{transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);margin-right: 0;padding-right:0;}
.main-menu li.menu-item-has-children span.sub-arrow::after{font-family: 'FontAwesome';content: "\f0d7";font-size: 12px;color: #eee;}
.main-menu li>ul{position: absolute;margin-top:-4px;background:#fff;border: 1px solid #eee;width:99.5%;visibility: hidden;opacity: 0;transition: 0.2s;-webkit-transition: 0.2s;-moz-transition: 0.2s;z-index: 9999;border-radius: 0;padding: 0;line-height: 30px;right: 0;}
.main-menu li>ul>li>ul{visibility: hidden;opacity: 0;display: block;margin: 0;}
.main-menu li>ul>li:hover>ul{visibility: visible;opacity: 1;float:right;color:#f00;}
.main-menu li>ul>li{display: inline-block !important;line-height: normal;text-align: center;padding-bottom:2px;float:right;}
.main-menu li>ul>li.menu-item-has-children::before{font-family: 'FontAwesome';content: "\f0d7";margin-top: 5px;margin-left: 5px;font-size: 12px;float: left;color: #eee;}
.main-menu li>ul>li:nth-last-child(1).menu-item-has-children::after{display:none;}
.main-menu li>ul>li>a{padding:0 5px;opacity: 0.7;}
.main-menu li>ul>li>a:hover{opacity: 1;color: #f00;}
.main-menu li > ul > li::after{content: " | ";color: #999;font-size: 12px;padding-left:2px}
.main-menu li>ul>li:nth-child(1){}
.main-menu li>ul>li::after{content: none;}
.main-menu li>ul>li>ul{width: 100%;margin: 0 !important;box-sizing: content-box;right: 0;}
.main-menu  li.current-menu-item a {
color: #f00;
}

بعلاوه اینکه، می خواهم این منو چسبان هم بشه. یعنی وقتی اسکرول می کنم به پایین صفحه، منو بچسبه به بالای صفحه.  کد position:fixed به استایل منو اضافه کردم اما کلا جای منو رو عوض کرد و چسبوند بالای صفحه! من می خواهم منو جاش توی قالب همین جایی که هست باشه، اما وقتی اسکرول می کنم، یا همین منو و یا یک منوی دیگر مثل همین منو بیاد بالای صفحه بچسبه و وقتی دوباره اسکرول می کنم به اول صفحه، اون منو چسبان محو بشه!
ممنون میشم از دوستان اگر کسی راه حلی داره کمک کنه.