html - How to align an absolute div -


i have following code:

body{    margin: 10px;  }    .menu {    border: solid black;    border-width: 1px 1px 0px 1px;    background-color: black;    color: white;    width: 300px;    position: relative;    padding: 12px;  }    .menu:hover{    background-color: white;    color: black;  }  .dropdown {    position: absolute;    background-color: white;    width: 200px;    left: -1px;    border: solid black;    border-width: 0px 1px 1px 1px;    color:black;    top:100%;  }  .dropdown ul {    list-style: none;    padding: 10px;    margin: 0;  }  .zoom {    zoom: 200%;  }
<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>

there line break(on left). how can fix this? on zoomlevels not showing up, on default zoom clear on website. tested on serveral webbrowsers , of them have problem.

body{    margin: 10px;  }    .menu {    border: solid black;    border-width: 1px 1px 0px 1px;    background-color: black;    color: white;    width: 200px;    position: relative;  }    .menu:hover{    background-color: white;    color: black;  }  .dropdown {    position: absolute;    background-color: white;    width: 200px;    left: -1px;    border: solid black;    border-width: 0px 1px 1px 1px;    color:black;    top:100%;  }  .dropdown ul {    list-style: none;    padding: 10px;    margin: 0;  }  .zoom {    zoom: 200%;  }
<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 -