李边界包括绝对的孩子

Question

I'm building hover dropdown menus in CSS and I want to style each primary li 's border to surround its (absolute) child li on hover. At the moment, the border only surrounds the primary li content. For the sake of the demo, the border is always present, but I'll toggle it on hover or click later.

<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;
}

Demo: http://codepen.io/ourcore/pen/apmMqL

Answer 1

You may draw the border from the ul showing up :

&: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