html - 导航栏悬停上的 Css 样式

Question

如何让悬停在 li 的高度上看到这张图片悬停只应用在小尺寸上。我希望它采用所有尺寸。

我希望它像这张选定的图像一样占据所有空间:

CSS

ul {
	list-style: none;
}

li {
	display: inline-block;
	float: right;
	padding: 10px
}
li:hover  {
   color:white;
   background-color:orange;
}

<nav>

   <a href="#" id="menu-icon"></a>
   <ul>
      <li><a href="index.html" class="current"><?php echo $lang['MENU_HOME']; ?></a></li>
      <li class="current"><a href="index-1.html"><?php echo $lang['MENU_ABOUT_US']; ?></a></li>
     <li><a href="#services"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a></li>
     <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li>
     <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li>
  </ul>

</nav>

Answer 1

试试这个解决方案......................

//css

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nav-list > li {
    display: inline-block;
    float: right;
  }
  .nav-list > li > a {
    display: block;
    padding: 10px;
    color: #666;
    text-decoration: none;
  }
  .nav-list > li > a:hover,
  .nav-list > li > a:focus {
    background-color: orange;
    outline: 0;
  }
  .nav-list > .active > a,
  .nav-list > .active > a:hover,
  .nav-list > .active > a:focus {
    background-color: orange;
    outline: 0;
  }

html

<nav>
    <a href="#" id="menu-icon"></a>
    <ul class="nav-list">
    <li><a href="index.html" class="current"><?php echo $lang['MENU_HOME']; ?></a></li>
    <li class="current"><a href="index-1.html"><?php echo $lang['MENU_ABOUT_US']; ?></a></li>
    <li><a href="#services"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a></li>
    <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li>
    <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li>
    </ul>
</nav>