مشکل در منو قالب

[mssp 0]

با درود و احترام

بنده در حال کدنویسی یک قالب html به وردپرس هستم. یک مشکلی با استایل منو دارم و ممنون میشم دوستان کمک کنند:

ببینید وردپرس برای هر منو که اضافه میکنید یک <li> با id به شکل زیر درست میکنه
menu-item-1
اگه 15 تا منو ساختید و بعد همه رو پاک کنید منوی جدید با شماره 16 میاد بالا. به همین ترتیب ادامه میکنه. ما در استایل قالب html برای هر منو یک بک گراند داریم که به صورت زیر استایل دهی شده:

nav.cmn-tile-nav li.menu-item-1 {
  background-color: #E4000D;
}
nav.cmn-tile-nav li.menu-item-1 a:after,nav.cmn-tile-nav li.menu-item-1 a:before{
   border-top: 27px solid #E4000D;
}
nav.cmn-tile-nav li.menu-item-1 a {
  background-color: #E4000D;
}
nav.cmn-tile-nav li.menu-item-1:hover, nav.cmn-tile-nav li.menu-item-1:hover a {
  background-color: #941212;
}
nav.cmn-tile-nav li.menu-item-1:hover a:after, nav.cmn-tile-nav li.menu-item-1:hover a:before{
  border-top: 27px solid #941212;
}
nav.cmn-tile-nav li.menu-item-2 {
  background-color: #be0a0a;
}
nav.cmn-tile-nav li.menu-item-2 a:after,nav.cmn-tile-nav li.menu-item-2 a:before{
   border-top: 27px solid #be0a0a;
}
nav.cmn-tile-nav li.menu-item-2 a {
  background-color: #be0a0a;
}
nav.cmn-tile-nav li.menu-item-2:hover, nav.cmn-tile-nav li.menu-item-2:hover a {
  background-color: #5d0507;
}
nav.cmn-tile-nav li.menu-item-2:hover a:after, nav.cmn-tile-nav li.menu-item-2:hover a:before{
  border-top: 27px solid #5d0507;
}
nav.cmn-tile-nav li.menu-item-3 {
  background-color: #a00000;
}
nav.cmn-tile-nav li.menu-item-3 a:after,nav.cmn-tile-nav li.menu-item-3 a:before{
   border-top: 27px solid #a00000;
}
nav.cmn-tile-nav li.menu-item-3 a {
  background-color: #a00000;
}
nav.cmn-tile-nav li.menu-item-3:hover, nav.cmn-tile-nav li.menu-item-3:hover a {
  background-color: #3a0000;
}
nav.cmn-tile-nav li.menu-item-3:hover a:after, nav.cmn-tile-nav li.menu-item-3:hover a:before{
  border-top: 27px solid #3a0000;
}
nav.cmn-tile-nav li.menu-item-4 {
  background-color: #780000;
}
nav.cmn-tile-nav li.menu-item-4 a:after,nav.cmn-tile-nav li.menu-item-4 a:before{
   border-top: 27px solid #780000;
}
nav.cmn-tile-nav li.menu-item-4 a {
  background-color: #780000;
}
nav.cmn-tile-nav li.menu-item-4:hover, nav.cmn-tile-nav li.menu-item-4:hover a {
  background-color: #260000;
}
nav.cmn-tile-nav li.menu-item-4:hover a:after, nav.cmn-tile-nav li.menu-item-4:hover a:before{
  border-top: 27px solid #260000;
}
nav.cmn-tile-nav li.menu-item-5 {
  background-color: #5a0000;
}
nav.cmn-tile-nav li.menu-item-5 a:after,nav.cmn-tile-nav li.menu-item-5 a:before{
   border-top: 27px solid #5a0000;
}
nav.cmn-tile-nav li.menu-item-5 a {
  background-color: #5a0000;
}
nav.cmn-tile-nav li.menu-item-5:hover, nav.cmn-tile-nav li.menu-item-5:hover a {
  background-color: #000000;
}
nav.cmn-tile-nav li.menu-item-5:hover a:after, nav.cmn-tile-nav li.menu-item-5:hover a:before{
  border-top: 27px solid #000000;
}
nav.cmn-tile-nav li.menu-item-6 {
  background-color: #860000;
}
nav.cmn-tile-nav li.menu-item-6 a:after,nav.cmn-tile-nav li.menu-item-6 a:before{
   border-top: 27px solid #860000;
}
nav.cmn-tile-nav li.menu-item-6 a {
  background-color: #860000;
}
nav.cmn-tile-nav li.menu-item-6:hover, nav.cmn-tile-nav li.menu-item-6:hover a {
  background-color: #430700;
}
nav.cmn-tile-nav li.menu-item-6:hover a:after, nav.cmn-tile-nav li.menu-item-6:hover a:before{
  border-top: 27px solid #430700;
}
nav.cmn-tile-nav li.menu-item-7 {
  background-color: #9c1d10;
}
nav.cmn-tile-nav li.menu-item-7 a:after,nav.cmn-tile-nav li.menu-item-7 a:before{
   border-top: 27px solid #9c1d10;
}
nav.cmn-tile-nav li.menu-item-7 a {
  background-color: #9c1d10;
}
nav.cmn-tile-nav li.menu-item-7:hover, nav.cmn-tile-nav li.menu-item-7:hover a {
  background-color: #400a04;
}
nav.cmn-tile-nav li.menu-item-7:hover a:after, nav.cmn-tile-nav li.menu-item-7:hover a:before{
  border-top: 27px solid #400a04;
}
nav.cmn-tile-nav li.menu-item-8 {
  background-color: #b72112;
}
nav.cmn-tile-nav li.menu-item-8 a:after,nav.cmn-tile-nav li.menu-item-8 a:before{
   border-top: 27px solid #b72112;
}
nav.cmn-tile-nav li.menu-item-8 a {
  background-color: #b72112;
}
nav.cmn-tile-nav li.menu-item-8:hover, nav.cmn-tile-nav li.menu-item-8:hover a {
  background-color: #7e1408;
}
nav.cmn-tile-nav li.menu-item-8:hover a:after, nav.cmn-tile-nav li.menu-item-8:hover a:before{
  border-top: 27px solid #7e1408;

همانطور که ملاحظه می فرمایید این کلاس دهی تا یک <li> با menu-item-9 تعریف شده که بعد از اینکه ما در وردپرس به یک منو با آی دی 10 رسیدیم دیگر این ویژگی های استایل را نخواهیم داشت.

خوب بدیهی است که منطقی نیست تعداد تعاریف <li> در فایل css را افزایش دهیم. دوستان برای حل این مشکل راهکاری دارند؟

با سپاس

[Mirrajabi 455]

از

nav.cmn-tile-nav li:nth-chlid(n)

بهتره استفاده کنید.

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

[mssp 0]

در 23 دقیقه قبل، Samaneh گفته است :

nav.cmn-tile-nav li:nth-chlid(n)

با درود و سپاس از پاسخ شما. متاسفانه متوجه این کد خط شما نشدم.اگر ممکن است بیشتر توضیح دهید.

با سپاس

 

[Mirrajabi 455]

ب جای اینکه از کلاس menu_item_ 1,2, 3....  استفاده کنید می تونید برای راحتی کار و همچنین صحیح بودن استایل از(li :nth-chlid(nاستفاده کنید،  مثلا(nth-chlid(1 فلان استایل،( nth-chlid(2 فلان استایل،  همین طور n را تا هر تعداد منو نیاز دارید ادامه دهید