ejaafari 0 ارسال شده در اسفند 99 سلام. وقت بخیر. من یک قالب فارسی دارم که 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 به استایل منو اضافه کردم اما کلا جای منو رو عوض کرد و چسبوند بالای صفحه! من می خواهم منو جاش توی قالب همین جایی که هست باشه، اما وقتی اسکرول می کنم، یا همین منو و یا یک منوی دیگر مثل همین منو بیاد بالای صفحه بچسبه و وقتی دوباره اسکرول می کنم به اول صفحه، اون منو چسبان محو بشه! ممنون میشم از دوستان اگر کسی راه حلی داره کمک کنه. نقل قول به اشتراک گذاری این ارسال لینک به ارسال به اشتراک گذاری در سایت های دیگر
smah2 8 ارسال شده در فروردین 0 این کد رو به آخر همین css اضافه کن: .main-menu li>ul>li{display: block !important;float:none !important;} اما برای فیکس شدن منو بعد از اسکرول باید از کد جاوا اسکریپت به علاوه css استفاده کنید.آدرس سایت رو بدید چک کنم.اکونت تلگرامم رو میدم خصوصی پیام بدید: https://t.me/cputeam_co @cputeam_co نقل قول به اشتراک گذاری این ارسال لینک به ارسال به اشتراک گذاری در سایت های دیگر