title: Semantic-ui main menu CSS hover and focus
body: <p>I have am problem with the styling of my navbar with semantic-ui. I like to change the color and background-color on hover and change the focus. But everything I do it just does not change the hover. I was only able to do it with jQuery, but that should not be the solution for this problem.</p>
  
  <p>This is the code I use for that part:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $('.main.menu').visibility({
        type: 'fixed'
      });
    })
  ;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a.nav.item:hover {
    background: #1B1C1D;
    color: #17AA1C;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ui borderless inverted stackable main menu"&gt;
      &lt;div class="ui text container"&gt;
        &lt;div href="#" class="header item"&gt;
          &lt;i class="code icon" id="myicon"&gt;&lt;/i&gt;
          Name
        &lt;/div&gt;
        &lt;a href="#" class="nav item"&gt;Me&lt;/a&gt;
        &lt;a href="#" class="nav item"&gt;Current Projects&lt;/a&gt;
        &lt;a href="#" class="nav item"&gt;Blog&lt;/a&gt;
        &lt;a href="#" class="nav item"&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>