Семантическое меню главного меню CSS наведение и фокус

Question

У меня проблема с дизайном моего навигатора с семантикой-ui. Мне нравится менять цвет и фоновый цвет при наведении и изменять фокус. Но все, что я делаю, просто не изменяет наведение. Я смог сделать это только с помощью jQuery, но это не должно быть решением этой проблемы.

Это код, который я использую для этой части:

$(document).ready(function() { 
 
    $('.main.menu').visibility({ 
 
     type: 'fixed' 
 
    }); 
 
    }) 
 
;

a.nav.item:hover { 
 
    background: #1B1C1D; 
 
    color: #17AA1C; 
 
}

<div class="ui borderless inverted stackable main menu"> 
 
    <div class="ui text container"> 
 
     <div href="#" class="header item"> 
 
     <i class="code icon" id="myicon"></i> 
 
     Name 
 
     </div> 
 
     <a href="#" class="nav item">Me</a> 
 
     <a href="#" class="nav item">Current Projects</a> 
 
     <a href="#" class="nav item">Blog</a> 
 
     <a href="#" class="nav item">Contact</a> 
 
    </div> 
 
    </div>

Answer 1

Стиль, который вы хотите переопределить прикован с .inverted класса.

Это будет работать, например.

.ui.inverted.menu .dropdown.item:hover, 
.ui.inverted.menu .link.item:hover, 
.ui.inverted.menu a.item:hover, 
.ui.link.inverted.menu .item:hover { 
    background: #1B1C1D; 
    color: #17AA1C; 
} 

jsbin https://output.jsbin.com/yijowusiqe