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

سلام دوسته عزیز به تگ های a کد  display:block  رو بدین و  تگ های  display: inline-block  را هم  \”block\” بدین و امتحان کنید هردو رو .  احتمالا درست میشه .اگر هم تمایل دارید آدرسه سایت رو بزارید تا کامل بتونیم بررسی کنیم و کدهای مورد نیاز رو براتون بفرستیم.    

سلام  گر تمایل دارید  همین جا یا اگر هم نه به ایمیلم آدرسه سایتتون رو بفرستید بررسی میکنم براتون --اگر دقیق بخوام بگم احتیاج به برسی کدها هست  ایمیل : sepidejam69@gmail.com

سلام  اگر با Inspect کروم آشنایی دارید  برید روی زیرمنوها Inspectکنید ببینید کدهای cssچی دادن  

سلام مجدد واقعیتش رو بگم اینطور سخته یه کم بررسی کردن نمیدوونم به جواب برسیم  یا نه اما یه قطعه کدی دارین  توی کدهای بالا  ".main-menu li.menu-item-has-children span.sub-arrow  " این رو برین پیدا کنید  float رو بردارین disaplay رو بلاک کنین ببینین میشه و اینکه روی زیرمنوها اینسپکت بزنین ببینین بهتون چی میده مثلا همونجا display :block کنین float رو بردارین  امیدوارم مشکلتون حل بشه نهایتا اسمه قالب رو بفرمایید ببینم نمونه اشو پیدا میکنم روش امتحان کنم 

سلام. با راهنمایی شما تا یه حدی موفق شدم! ممنون!

اما الان مساله ای که هست:
1- باکس زیر منوها خیلی بزرگه! می خواهم سایزش متناسب باشه
2- می خواهم باکس هر زیر منویی دقیقا زیر منوی والد قرار بگیره!

کدهایی که تغییر دادم:

 
/*-- منوی اصلی--*/
.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{display:block; 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;display:block; color:#f00;}
.main-menu li>ul>li{display: block !important;line-height: normal;text-align: right; padding-bottom:2px;}
.main-menu li>ul>li.menu-item-has-children::before{font-family: 'FontAwesome';content: "\f0d7";margin-top: 5px;margin-left: 5px;font-size: 12px; display:block; 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;
}

سلام  خواهش میکنم --برای این کار روی همون زیر منو inspectبزنید بعد یا   ببینید with داده یا نداده -ببینید با دادن "position " یا اینکه "margin " میتونید جابه جا کنید حواستون به ریسپانسیو بودنشون هم باشه یه سوالتون رو که من یادم  بگم بهتون منو استیکی بود که گفتید position:fix   داده بودین  جاش تغیر کرده بود شما  باید دقیقا با دادن leftیا right یا topجاشو مشخص کند .

سلام مجدد وقتی روی هرکدوم از منوها برین زیر منوها با تگ ulبا کلاس "submenu" هستن که شما با ارث بری در css اگر آشنا باشید(first-child  تا الی آخر) میتونید هرکدوم رو مشخص کنید و به صورت دلخواه  دربیارین --تنظیمات قالبتون  رو هم  یه نگاهی کنید شاید این امکان رو داشته باشه . موفق باشید

سلام
برای ساختن این منو باید از css,jqاستفاده کنید –اصولا قالب های وردپرسی دارن این تنظیم رو —حالا شما میتونید مثلا از افزونه float menue استفاده کنید و منو شناور درست نید اگر قالب این تنظیم رو نداره ---این سه تا آیتم رو به قسمته "nav" و کلاس "main-menu"  بدین یه استیکی منو ساخته میشه اما توی اسکرول به بالا یا پایین هست حذف نمیشه

1. position: fixed;
2. top: 0px;
3. z-index: 97799;

برای اون مشکله منوها هم کارتون رو آنلاین کردین بگین ببینیم چون الان احتمالا شماهم کد اضافه کردین برای این دمو که برای من فرستادین من هرچی بگم ممکنه به مشکل بخوریم این کار شدنیه به شرطی که من سایت شمارو ببینم

با سلام دوست عزیز،

• در رابطه با منوی چسبان یا Sticky Menu توصیه میکنم این مثال عملی ساده و کاملا واضح را ببینید و حتما کدهای CSS و JavaScript اون رو درک کنید تا بتوانید روی میزان اسکرول و در صورت نیاز موبایل هم این ویژگی رو کنترل کنید:
  
  کلیک کنید