李边界包括绝对子

我正在建立悬停下拉菜单在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

来源

2017-01-16 Mario Parra

你可以抓从ul的border显示出来：

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

来源

2017-01-16 17:22:30

，直到我添加的box-shadow这个伟大的工程。对不起，如果我意识到它会影响答案，我会在前面提及它。 –

@MarioParra你能展示你对盒子阴影的意义吗？ –

当然：http://codepen.io/ourcore/pen/vgXwzJ?editors=1100。理想情况下，我希望箱形阴影环绕整个'li'，但它只是围绕次要部分，因为它们连接在一起。 –

李边界包括绝对子

回答

相关问题