Question

我正在CSS中构建悬停下拉菜单，我希望在悬停时将每个主要li的边框设置为围绕其（绝对）子li。目前，边框仅包含主要li内容。为了演示，边框始终存在，但我会在悬停时切换它或稍后点击。

<section class="divider fullwidth">
  <div class="divider-cont">
    <div id="divider-links">
      <span id="filter-by">Filter Events By</span>
      <ul>
        <li><a href="#">Genre <i class="icon-arrow-down"></i></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Genre 1</a>
            </li>
            <li>
              <a href="#">Genre 2</a>
            </li>
            <li>
              <a href="#">Genre 3</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Venue & Location <i class="icon-arrow-down"></i></a></li>
        <li><a href="#">Time of Day <i class="icon-arrow-down"></i></a></li>
        <li><a href="#">Price Range <i class="icon-arrow-down"></i></a></li>
      </ul>
    </div>
  </div>
</section>

section.divider .divider-cont {
  padding: 0 2%;
}
section.divider .divider-cont #filter-by {
  margin-right: 50px;
}
section.divider .divider-cont ul {
  display: inline-block;
  position: relative;
}
section.divider .divider-cont ul li {
  display: inline-block;
  position: relative;
  border: 1px solid grey;
  padding: 15px;
}
section.divider .divider-cont ul li:hover ul {
  display: block;
}
section.divider .divider-cont ul li a {
  text-align: center;
}
section.divider .divider-cont ul li ul {
  display: none;
  position: absolute;
  background-color: white;
  padding-left: 0;
}
section.divider .divider-cont ul li ul li {
  display: block;
  border: none;
  padding: 0;
  text-align: left;
}
section.divider .divider-cont ul li a {
  padding-right: 50px;
}
section.divider .divider-cont ul li a, section.divider .divider-cont ul li a:hover, section.divider .divider-cont ul li a:active, section.divider .divider-cont ul li a:visited {
  color: grey;
}

演示：http://codepen.io/ourcore/pen/apmMqL

Answer 1

您可以从显示的border中绘制ul：

&:hover ul { 
  display: block;
  width:100%;
  margin:0 -1px;
  border:solid 1px gray;
  border-top:none;
  left:0;
}

http://codepen.io/anon/pen/XpjGxa?editors=1100

李边界包括绝对孩子

1 个答案: