李邊界包括絕對子

我正在建立懸停下拉菜單在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'，但它只是圍繞次要部分，因爲它們連接在一起。 –

李邊界包括絕對子

回答

相關問題