Databases
StackOverflow2013
Postsdbo
POTitles in css menu change width while hovering
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTitles in css menu change width while hovering
    text
    copied!<p>I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the <a href="http://jsfiddle.net/yogibimbi/8U5An/3/" rel="nofollow">JSFiddle</a>, or have a look at the markup:<br></p> <pre><code>&lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="javascript: showLogin()"&gt;you&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="javascript: showLogin()"&gt;register...&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript: showLogin()"&gt;login...&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript: showLogin()"&gt;forgot password...&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;.&lt;/li&gt; &lt;li&gt;&lt;a href="javascript: selectMenu()"&gt;qan&lt;/a&gt;&lt;/li&gt; &lt;li&gt;.&lt;/li&gt; &lt;li style="width: 20px"&gt;&lt;a class="site"&gt;be&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="javascript: false"&gt;be&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript: false"&gt;do&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>and the css definitions:</p> <pre><code>#menu { font-family: Arial, Helvetica, sans-serif; padding: 0px 5px; font-size: 12px; line-height: 18px; color: darkgrey; position: absolute; top: 0px; left: 0px; height: 20px; background-color: black; z-index: 3; /*opacity: 0;*/ white-space: nowrap; } #menu ul { margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; } #menu&gt;ul&gt;li { font-weight: bold; display: inline-block; float: left; padding: 2px 1px 0px 1px; width: auto; /*width: 10px;*/ } #menu a { color: inherit; text-decoration: none;} #menu&gt;ul&gt;li&gt;a:hover { background-color: grey;} #menu&gt;ul ul { display: none; background-color: lightgrey; padding: 2px 5px; line-height: 14px; min-width: 100px; } #menu&gt;ul ul&gt;li { color: black; padding: 2px 8px 2px 5px; margin: 0px -3px; } #menu&gt;ul ul&gt;li:hover { color: lightgrey; background-color: grey;} #menu&gt;ul&gt;li:hover ul { display: block;} </code></pre> <p>Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.<br/> It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions? </p>
 

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