html <li> 标签不会展开以包含 anchor 填充

Question

我的页面上有以下导航栏，我想要 <li>标签将它们的高度扩展到我的 anchor 的高度，但由于某种原因它们忽略了 anchor 填充(如果您运行代码段并将鼠标悬停在菜单项上，您可以看到这一点)。

谁能解释我做错了什么以及如何解决这个问题？

谢谢

#navbar {
  text-align: center;
  background-color: #913D88;
}
@media (min-width: 992px) {
  #navbar {
    border-radius: 10px;
  }
}
#navbar ul {
  list-style: none;
  text-align: center;
}
#navbar ul li {
  font-size: 1.1em;
  font-weight: 400;
  display: inline-block;
}
@media (min-width: 767px) {
  #navbar ul li {
    font-size: 1.2em;
  }
}
#navbar ul li a {
  padding: 0.5em 1em;
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  #navbar ul li a {
    padding: 0.5em 2em;
  }
}
#navbar ul li a:visited, #navbar ul li a:link {
  color: #fff;
  text-decoration: none;
}
#navbar ul li a:hover {
  background-color: #c371ba;
  color: #491f45;
}
#navbar ul li a img {
  height: 1em;
}
#navbar ul .dropdown {
  position: relative;
}
#navbar ul .dropdown:hover > .drop-nav {
  display: block;
}
#navbar ul .dropdown .drop-nav {
  position: absolute;
  top: 95%;
  display: none;
}
#navbar ul .dropdown .drop-nav li {
  width: 200px;
  font-size: 0.8em;
  padding: 0.5em;
  display: block;
  background-color: #913D88;
  border-bottom: 1px solid #fff;
}
#navbar ul .dropdown .drop-nav li:hover {
  color: #491f45;
  background-color: #c371ba;
}
#navbar ul .dropdown .drop-nav a {
  font-size: 1em;
  line-height: 1.3em;
}
#navbar ul .dropdown .drop-nav a:visited, #navbar ul .dropdown .drop-nav alink {
  color: #fff;
  text-decoration: none;
}

<div id="navbar" ng-controller="NavbarController">
  <ul>
    <li ng-click="goTo('http://www.ijs.si/ijsw')"><a href="">IJS</a>
    </li>
    <li class="dropdown"><a href="">knjižnica&nbsp;<span class="ion-arrow-down-b"></a>
      <ul class="drop-nav">
        <li ng-click="goTo('#/predstavitev')"><a href="">predstavitev</a>
        </li>
        <li><a href="">osebje</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a href="#">zaloga&nbsp;<span class="ion-arrow-down-b"></a>
      <ul class="drop-nav">
        <li><a href="">tiskane revije</a>
        </li>
        <li><a href="">elektronske revije</a>
        </li>
        <li><a href="">baze podatkov</a>
        </li>
        <li ng-click="goTo('http://www.cobiss.si/scripts/cobiss?command=CONNECT&amp;base=50108')"><a href="">katalog (COBISS)</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a href="">storitve&nbsp;<span class="ion-arrow-down-b"></a>
      <ul class="drop-nav">
        <li><a href="">medknjižnična izposoja</a>
        </li>
        <li><a href="">fotokopirnica</a>
        </li>
        <li><a href="">bibliografije</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">
        <img src="images/EN.gif">
      </a>
    </li>
  </ul>
</div>

Answer 1

为#navbar ul li a添加display:block