CSS Hover Переход

Question

Я пытаюсь создать переход Css, похожий на навигационной панели из this.

Я попытался следующий код, но он не работает.

 .navbar-default .navbar-nav li a{ 
    /* color: #fff; */ 
    text-transform: uppercase; 
    padding-left: 24px; 
    padding-right: 24px; 
    position: relative; 
    } 

    .navbar-default .navbar-nav li a:before{ 
    background-color: #c83a3a; 
    height: 100%; 
    left: 50%; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    top: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    width: 0; 
    content: ""; 
    position: absolute; 
    -webkit-transition: all 0.3s ease 0s; 
    transition: all 0.3s ease 0s; 
    z-index: -1; 
    } 

    .navbar-default .navbar-nav li:hover a:before{ 
    width: 100%; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    } 

Мой текущий Сайт here Это не работает на панели меню верхнего уровня и работает для отдыха всей

Answer 1

Попробуйте это:

.navbar-default .navbar-nav li a{ 
    /* color: #fff; */ 
    text-transform: uppercase; 
    padding-left: 24px; 
    padding-right: 24px; 
    position: relative; /* change */ 
    } 

    /*.navbar-default .navbar-nav li a:hover 
    { 
    background-color: #c83a3a; 
    transition: all 0.3s ease 0s; 
    }*/ 

    .navbar-default .navbar-nav li a:before{ 
    background-color: #c83a3a; 
    height: 100%; 
    left: 50%; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    top: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    width: 0; 
    content: ""; 
    position: absolute; 
    -webkit-transition: all 0.3s ease 0s; 
    transition: all 0.3s ease 0s; 
    z-index: -1; 
    } 

    /* change */ 
    .navbar-default .navbar-nav li:hover a:before{ 
    width: 100%; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    } 

Рабочий пример: https://jsfiddle.net/p3aqno7j/