Databases
StackOverflow2013
Postsdbo
POSimple CSS Menu Adjustment
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple CSS Menu Adjustment
    text
    copied!<p>I am having a minor issue with IE7 (whats New)... </p> <p>I am trying to create a simple, "button" that has basic effects when mouse-over to show a small menu. Such as "actions". Perhaps you select multiple items on a page and you want to apply actions to them.</p> <p>So this is my code, and everything seems to work perfectly fine, except in IE7. It displays the menu at 100% width, and I don't want that.... I want it to display the width or the button-text.</p> <p>If you have any ideas on tweaking this, that would be much appreciated. </p> <pre><code>&lt;style&gt; * { margin: 0; padding: 0; } body { font-family:Arial, Helvetica, sans-serif; } /* overall button layout */ .dropButton { display: block; position: relative; background-color: #0073ea; color: #FFF; list-style: none; margin: 0; padding: 0; z-index: 100; } /* Head Button Visual */ .dropButton li a { padding: 3px 10px; color: #FFF; text-decoration: none; display: inline-block; } /* Sub-Menu Display */ .dropButton ul { position: absolute; left: -99999px; list-style: none; background: #FFF; border: solid 1px #D2D2D2; z-index: 105!important; } /* Menu listed items */ .dropButton ul a { color: #0073ea; display: block; white-space: nowrap; } /* Bring the drop-menu to visual scope */ .dropButton li:hover ul { left: 0; } /* Sub Menu items upon hover */ .dropButton li:hover ul li a:hover { background: #F1F1F1; } &lt;/style&gt; &lt;ul class="dropButton"&gt; &lt;li&gt;&lt;a href="#"&gt;Actions&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Delete Selected&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Add To Category&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload