relative div to relative child auto width

Question

サブメニューulがあります。widthを指定せずに、最も広い子のwidthwidthに拡張する必要があります。現時点では、child ulは.mainlinkの幅をとり、li項目内のテキストは折り畳まれ始めます。私はそれを必要とするなら、1行にして、.mainlinkの幅を越える必要があります。

私は可能な限りdisplayを試しましたが、動作させることはできません。

.mainnav { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
ul.mainnav li { 
 
    display: table-cell; 
 
} 
 
.subnav { 
 
    position: absolute; 
 
    top: 40px; 
 
} 
 
.menuitem { 
 
    position: relative; 
 
    display: block; 
 
}

<ul class="mainnav"> 
 
    <li class="mainlink"><a href="">Link 11</a> 
 
    </li> 
 
    <li class="mainlink"> 
 
    <a href="">Link 12</a> 
 
    <ul class="subnav"> 
 
     <li class="menuitem"><a href="">link 1</a> 
 
     </li> 
 
     <li class="menuitem"><a href="">link 2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

は、デフォルトではpadding

UPDATE使用display:inline-block

（OP更新質問に基づいて）で.mainnav > li

0を持っている .subnav ulために paddingをリセット

---

.mainnav { 
 
    background:lightyellow; 
 
    position:relative 
 
} 
 
ul.mainnav > li { 
 
    display: inline-block; 
 
    background:lightblue; 
 
} 
 
.subnav { 
 
    position: absolute; 
 
    top: 40px; 
 
    padding: 0; 
 
    border: 5px solid green 
 
} 
 
.menuitem { 
 
    position: relative; 
 
    display: block; 
 
    background: red 
 
}

<ul class="mainnav"> 
 
    <li class="mainlink"><a href=" ">Link 11</a></li> 
 
    <li class="mainlink"> 
 
    <a href="">Link 12</a> 
 
    <ul class="subnav"> 
 
     <li class="menuitem"><a href="">link 1</a> 
 
     </li> 
 
     <li class="menuitem"><a href="">link 2 long text</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>