html - CSS - How to place absolute div correctly -
i have following code:
.menu{ border: solid red; border-width: 1px 1px 0px 1px; background-color:black; color:white; width: 60px; } .dropdown{ position:absolute; background-color: grey; width:100px; } .dropdown ul{ list-style:none; padding:10px; margin: 0; } .zoom{ zoom:300%; }
<div class="menu zoom"> click me <div class="dropdown"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </div>
how can place dropdown menu same x position parent, without removing border? tried 'box-sizing: border-box', somehow doesn't work.
set position: relative
on parent element , on child set position left same negative value left border width of parent element.
.menu { border: solid red; border-width: 1px 1px 0px 1px; background-color: black; color: white; width: 60px; position: relative; } .dropdown { position: absolute; background-color: grey; width: 100px; left: -1px; } .dropdown ul { list-style: none; padding: 10px; margin: 0; } .zoom { zoom: 300%; }
<div class="menu zoom"> click me <div class="dropdown"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </div>
Comments
Post a Comment