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
Post a Comment