html - 子菜单仅在悬停时显示

Question

我有下面的菜单。

我希望仅当我将鼠标悬停在左侧菜单中的“Fatture Esterne”上时，“Crea Fatture”和“Fatture Esterne”才会出现在右侧。

我怎样才能做到这一点？

#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

你的错误是你在第一里和内里使用了同一个类

所以像 ul li.has-sub 这样的东西会选择所有具有类 has-sub 的 li 元素，即使它们不是直接子元素也是如此。

要解决这个问题，要么更改类的名称，要么以不同的方式选择它们。

#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/