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?

http://jsfiddle.net/n45p7/

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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -