CSS: relative position in dropdown menu affects parent
<p>I have a <code>li</code> parent that contains a <code>ul</code> child. Both need to be positioned as relative.</p>

<p>The problem is that the width of the <code>ul</code> child changes the width of the <code>li</code> parent. </p>

<p>Here is my code:</p>

<p>HTML</p>

<pre><code>&lt;li class="nav open"&gt;
&lt;ul class="dropdown-menu " role="menu"&gt;
    &lt;li id="t-smwbrowselink"&gt;&lt;a href="/mediawiki/index.php/Special:Browse/Main_Page" rel="smw-browse" tabindex="-1"&gt;Browse properties&lt;/a&gt;&lt;/li&gt;
    ....
&lt;/ul&gt;
</code></pre>

<p></li></p>

<p>CSS</p>

<pre><code>li.nav.open {
    position: relative;
    overflow: auto;
    display:  inline-block;
}

ul.dropdown-menu {
    position: relative;
}
</code></pre>

<p>I add an image of the result. <a href="https://i.stack.imgur.com/h1raT.png" rel="nofollow noreferrer">Image</a>. How can I make the parent <code>ul</code> independent to the child if both are in relative position? </p>

<p><img src="https://i.stack.imgur.com/h1raT.png" alt=""></p>