SubMenu Show only when hover

Question

I have the menu, below.

I want "Crea Fatture" and "Fatture Esterne" to appear at the right only when I hover over "Fatture Esterne" in the left menu.

How can I achieve that?

#cssmenu {
  line-height: 15px;
  text-align: left;
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub:hover ul li.#sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #0a3f75 url('images/caret.png') no-repeat;
  background-position: 90% 195%;
  color: #fff;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
  color: #0a3f75;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #0a3f75;
  color: #fff;
}
li#sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
li#sub:hover ul {
  display: block;
}

<div class="navbar-collapse collapse navbar-right sendaboxnavbar" id="cssmenu" style="width: 1093px;">
  <ul style="float: left;">
    <li class='has-sub'><a href="" id="A3" style="width: 190px;" class="usernav">Tab Amministrativo <span class="caret"></span></a>
      <ul>
        <li><a class="navbar-text" href="/Admin/Pages/EsportazioneFatture.aspx">Esporta Fatture</a>
        </li>
        <li><a class="navbar-text" href="/Admin/Pages/Rimborsi.aspx">Rimborsi</a>
        </li>
        <li><a class="navbar-text" href="/Admin/Pages/NotaCredito.aspx">Note di Credito</a>
        </li>
        <li class='has-sub' id='sub'><a href="" id="A3" class="usernav">Fatture Esterne</a>
          <ul>
            <li><a class="navbar-text" href="/Admin/Pages/CreaFattura.aspx">Crea Fattura</a>
            </li>
            <li><a class="navbar-text" href="/Admin/Pages/FattureEsterne.aspx">Fatture Esterne</a>
            </li>
          </ul>
        </li>
        <li class='last'><a class="navbar-text" href="/Admin/Pages/Dashboard_Prezzi_Nazionale.aspx">Tariffario</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

View on JSFiddle

Answer 1

Your mistake is that you are using the same class in the first li and the inner li
so having something like ul li.has-sub will select all li elements with a class has-sub even if they are not direct children.
To take care of this, either change the names of the classes, or select them in a different way.

#cssmenu {
  line-height: 15px;
  text-align: left;
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li#sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub:hover ul li.#sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #0a3f75 url('images/caret.png') no-repeat;
  background-position: 90% 195%;
  color: #fff;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
  color: #0a3f75;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #0a3f75;
  color: #fff;
}
li#sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
li#sub:hover ul {
  display: block;
}

<div class="navbar-collapse collapse navbar-right sendaboxnavbar" id="cssmenu" style="width: 1093px;">
  <ul style="float: left;">
    <li class='has-sub'><a href="" id="A3" style="width: 190px;" class="usernav">Tab Amministrativo <span class="caret"></span></a>
      <ul>
        <li><a class="navbar-text" href="/Admin/Pages/EsportazioneFatture.aspx">Esporta Fatture</a>
        </li>
        <li><a class="navbar-text" href="/Admin/Pages/Rimborsi.aspx">Rimborsi</a>
        </li>
        <li><a class="navbar-text" href="/Admin/Pages/NotaCredito.aspx">Note di Credito</a>
        </li>
        <li class='has-sub' id='sub'><a href="" id="A3" class="usernav">Fatture Esterne</a>
          <ul>
            <li><a class="navbar-text" href="/Admin/Pages/CreaFattura.aspx">Crea Fattura</a>
            </li>
            <li><a class="navbar-text" href="/Admin/Pages/FattureEsterne.aspx">Fatture Esterne</a>
            </li>
          </ul>
        </li>
        <li class='last'><a class="navbar-text" href="/Admin/Pages/Dashboard_Prezzi_Nazionale.aspx">Tariffario</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

jsfiddle: https://jsfiddle.net/tyrj5xnu/4/