html - Float messes child width -
i remember have ran before cannot stress enough remember workaround.. have drop down menu fiddled ease. problem when hover on dot see how children elements wrapped , not displayed on single line. how can have them looking normally?
html
<div class='addedfordisplaypurposes'> <div class="optionslist"> <span>•</span> <div class="optionsholder"> <div data-id="asdasd" class="socint">add friend</div> <a href="#">send message</a> </div> </div> </div>
css
.addedfordisplaypurposes { width:300px; } .optionslist { display:inline-block; position:relative; cursor:pointer; float:right; } .optionslist > span { font-size:20px; color:black; } .optionslist:hover > span { color:white; } .optionslist:hover .optionsholder { display:inline-block; } .optionsholder { position:absolute; display:none; top:0; right:0; background:white; border:solid black 1px; padding:5px 0 5px 0; z-index:3; } .optionsholder > * { padding:5px 10px 5px 10px; font-weight:bold; } .optionsholder > *:hover { background:black; color:white; }
make these changes , problem solved.
.optionsholder { position: absolute; display: none; top: 15px; right: 0; background: white; border: solid black 1px; padding: 5px 0 5px 0; z-index: 3; width: 140px; }
edit
if cannot make changes width
, add white-space:nowrap;
text wrap in 1 line.
for instance,
.optionsholder { position: absolute; display: none; top: 15px; right: 0; background: white; border: solid black 1px; padding: 5px 0 5px 0; z-index: 3; white-space:nowrap; }
hope helps now.
Comments
Post a Comment