My character sheet has some items which I want appear on hover. But they appear shifted down out of the box I want them to sit in and they nudge the button out of the way. &nbsp;Can someone tell me what CSS attribute I need to set to make to stop this happening. If i paste this code into stand alone files and open with chrome the shift down doesn't happen, so I think something is being inherited from somewhere. A reduced version of my HTML, which shows this behaviour looks like this &lt;input type='hidden' class="sheet-activate_r1a" name="attr_controller_r1a" value='active'&gt; r1a &lt;div&gt; &lt;label&gt;&lt;input type="radio"&nbsp; name="attr_controller_r1a" value="active" checked&gt;&lt;span&gt;active&lt;/span&gt;&lt;/label&gt; &lt;label&gt;&lt;input type="radio"&nbsp; name="attr_controller_r1a" value="inactive"&gt;&lt;span&gt;inactive&lt;/span&gt;&lt;/label&gt; &lt;/div&gt; &lt;div class ="sheet-item-resources_title sheet-rotated"&gt;Resources&lt;/div&gt; &lt;div class ="sheet-griditem sheet-item-resources_body"&gt; &lt;ul&gt; &lt;li&gt; &lt;label&gt;&lt;input type="text" name="attr_resource1_txt"/&gt;&lt;/label&gt; &lt;div class="sheet-styled-select2"&gt; &lt;ul&gt; &lt;li&gt;&lt;label class="sheet-result_r1a"&gt;&lt;input type="checkbox" name="attr_resource1a" value="d10"&gt;&lt;img src="<a href="http://www.thefirstcity.co.uk/rpg/dice/d10.jpg" rel="nofollow">http://www.thefirstcity.co.uk/rpg/dice/d10.jpg</a>" alt="d10" width="32" height="32" border="0" align="middle" /&gt;&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" name="attr_resource1b" value="d10"&gt;&lt;img src="<a href="http://www.thefirstcity.co.uk/rpg/dice/d10.jpg" rel="nofollow">http://www.thefirstcity.co.uk/rpg/dice/d10.jpg</a>" alt="d10" width="32" height="32" border="0" align="middle" /&gt;&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;button type="roll" value="!power --whisper|gm --name|Reset resource [@{resource1_txt}](!resource_reset,@{character_id},resource1)" name="reset_res1"&gt;Request reset&lt;/button&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; and my css like this ul { &nbsp; &nbsp; &nbsp;&nbsp; list-style: none; } .sheet-rotated { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; writing-mode: vertical-lr; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; background-color: #80cbc4; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid green; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; padding: 20px; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; font-size: 40px; } .sheet-styled-select2 {&nbsp; margin: 5px; padding: 0px;&nbsp; border: 2px solid pink;&nbsp; /*width: 180px;*/ height: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .sheet-styled-select2 &gt; ul { list-style: none; padding: 0px; margin: 0px;&nbsp; } .sheet-styled-select2 &gt; ul &gt; li &gt; label &gt; img {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;opacity: 0.4; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;filter: alpha(opacity=40); &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;float:left; display: none; vertical-align:top; } .sheet-styled-select2 &gt; ul &gt; li &gt; label &gt; input[type="checkbox"] {&nbsp; visibility: hidden; display: none; } .sheet-styled-select2 &gt; ul &gt; li &gt; label &gt; input[type="checkbox"]:checked + img {&nbsp; display: block; float:left; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;opacity: 1; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;filter: alpha(opacity=100); } .sheet-styled-select2:hover ul &gt; li &gt; label &gt; img {&nbsp; display: block; } .sheet-activate_r1a[value*="active"] ~ *{ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --display_r1a:block; } .sheet-activate_r1a[value*="inactive"] ~ *{ &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;--display_r1a:none; } .sheet-styled-select2:hover ul &gt; li &gt; label.sheet-result_r1a &gt; img {&nbsp; display:var(--display_r1a); }