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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -