Databases
StackOverflow2013
Postsdbo
POWhy can't an <ul> (with absolute position) inside a <li> (with relative position) auto size?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy can't an <ul> (with absolute position) inside a <li> (with relative position) auto size?
    text
    copied!<p>EDIT: see also my own answer below (2016)</p> <hr> <p>For example:</p> <pre><code>&lt;ul&gt; &lt;li class="first"&gt;&lt;a href="#" title=""&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title=""&gt;Chi siamo&lt;/a&gt; &lt;ul&gt;&lt;li&gt;&lt;a href="#" title=""&gt;item1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" title=""&gt;item2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" title=""&gt;Novità&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title=""&gt;Promozioni&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Then styled:</p> <pre><code>/* level 1 Main menu ----------------------------------------- */ #main-menu &gt; ul{ list-style:none; } #main-menu &gt; ul &gt; li{ float:left; display:block; position:relative; margin-left:1em; } #main-menu &gt; ul &gt; li.first{ margin-left:0; } /* sub Main menu ----------------------------------------- */ #main-menu &gt; ul &gt; li ul { position: absolute; z-index:1000; display:none; left:0; top:28px; } #main-menu &gt; ul &gt; li:hover ul { display:inline-block; } #main-menu &gt; ul &gt; li ul li{ float:left; display:block; list-style:none; } </code></pre> <p>ok. So, I've got the main menu that shows up horizontal. I also want the submenu to show horizontal. But for some reason, the ul box do not resize to reach the total li tags width, so it remains vertical. The parent ul do not suffer of this problem. I could make it work by simply adding a proper width to the child ul, but this is not the way I wanna use.</p> <p>Any idea?</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