在悬停

Question

我有一个包含一系列含有内容的li的ul。在悬停时，li的背景会改变颜色。 我遇到的问题是，如果视口缩小，导致堆叠的标题更长，则悬停颜色会在主ul之外出血。

我试着溢出：隐藏在李：徘徊，认为这会阻止它，但我显然误解了，因为它没有任何区别。

一个简单的例子是

#secondary-menu {
  background: #007dc5;
  width: 80%;
}

ul#topnav {
  list-style: none;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
}

ul#topnav li a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 26px 20px;
}

ul#topnav a.home:hover {
  margin: 0px;
  padding: 0px;
  background: transparent;
  border: 0px none;
}

a.cat,
ul#topnav li {
  text-align: center;
  cursor: pointer;
}

ul#topnav li a:hover {
  background-color: #e6e7eb;
  color: #007dc5;
}

<div id="secondary-menu">
  <ul id="topnav">
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Long Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Another Long Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
  </ul>
</div>

我在这里设置了一个小提琴https://jsfiddle.net/z44eao79/

那么，确保li的背景悬停颜色不会超出ul边界的​​正确方法是什么？

Answer 1

您可以更改方法以避免固定填充值：

＆＃13;

＆＃13;

#secondary-menu {
  background: #007dc5;
  width: 80%;
}

ul#topnav {
  list-style: none;
  padding: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul#topnav li a {
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

ul#topnav a.home:hover {
  margin: 0px;
  padding: 0px;
  background: transparent;
  border: 0px none;
}

a.cat,
ul#topnav li {
  text-align: center;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

ul#topnav li a:hover {
  background-color: #e6e7eb;
  color: #007dc5;
}

＆＃13;

<div id="secondary-menu">
  <ul id="topnav">

    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Long Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Another Long Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

fiddle

Answer 2

将overflow:hidden添加到您的ul#topnav规则中：

ul#topnav {
  list-style: none;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  overflow:hidden;
}

#secondary-menu {
  background: #007dc5;
  width: 80%;
}

ul#topnav {
  list-style: none;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

ul#topnav li a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 26px 20px;
}

ul#topnav a.home:hover {
  margin: 0px;
  padding: 0px;
  background: transparent;
  border: 0px none;
}

a.cat,
ul#topnav li {
  text-align: center;
  cursor: pointer;
}

ul#topnav li a:hover {
  background-color: #e6e7eb;
  color: #007dc5;
}

<div id="secondary-menu">
  <ul id="topnav">
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Long Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Another Long Heading</a></li>
    <li class="col-sm-4 secondary-menu-dropdown col-md-2 col-lg-2 "><a href="#" class="cat">Heading</a></li>
  </ul>
</div>