مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

arezoo.fg

عضویت از 1394/08/11

تنظیم قرار گرفتم مثلث در پایین li فعال

  • سه شنبه 11 آبان 1395
  • 11:05
تشکر میکنم

سلام!

من یه منو دارم که میخوام وقتی active  بود یه مثلث کوچیک پایینش نمایش داده بشه که با after نوشتم. اما وقتی active  میشه به li  فعالم یه فاصله ای رو میده.

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


.menu-bar li.item-menu {
    float: right;
    display: block;
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    cursor:pointer;
      

}


.menu-bar .active:after {
    content: '';
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color:   transparent transparent  #fff;
    display:inline-block;
    position:relative;
    bottom:-20px;

   left:50%;


}

پاسخ های این پرسش

تعداد پاسخ ها : 1 پاسخ
کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • سه شنبه 11 آبان 1395
  • 13:01

کافیه به کلاس item-menu موقعیت relative دهیدو به کلاس active موقعیت absolute :

.menu-bar li.item-menu {
            float: right;
            display: block;
            color: #fff;
            text-align: center;
            padding: 12px 16px;
            text-decoration: none;
            cursor: pointer;
            position: relative;
        }
        .menu-bar .active:after {
            content: '';                        
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent #fff;
            display: inline-block;
            position: absolute;
            bottom: 0px;
            left: 50%;
        }

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)