ドロップダウン垂直メニューサブメニューの幅を自動的に増やす

Question

ドロップダウンの垂直メニューを作成しました。メニューは機能していますが、サブメニューの幅は親コンテナ/ divの幅に依存します。これにより、テキストやその他のコンテンツがスタックされます。

親コンテナをdisplay：block（幅/最大なし）として設定するか、項目あたりの幅を設定して問題を解決できますが、そのようにしたくありません。

親の幅とは無関係な項目に基づいて幅を調整したい。

メニューは動的なので、私はそれ以前にはわかりませんが、表示ブロックはページ内の他の要素と「問題」を作成します。

------ CSS --------------

.dropdown { 
    position: relative; 
    margin: 0; 
    top: 0; 
    z-index: 1; } 
    .dropdown__trigger { 
    display: inline-block; 
    padding: 0.3125rem; } 
    .dropdown__content { 
    position: absolute; 
    left: 0; 
    top: 100%; 
    border: 1px solid red; 
    visibility: hidden; 
    transform: translateY(15px); 
    opacity: 0; 
    background: #fff; } 
    .dropdown__item { 
    padding: 1rem; 
    display: inline-block; } 
    .dropdown .dropdown .dropdown__content { 
    left: 100%; 
    top: 0; } 
    .dropdown:hover > .dropdown__content { 
    transform: translateY(0); 
    opacity: 1; 
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s; 
    visibility: visible; } 

---- HTML ------------- - -------無視インラインスタイル開発目的のためにのみ-------

<div class="grid" style="width:150px;"> 
<div class="dropdown"> 
    <a class="button--primary dropdown__trigger ">Dropdown</a> 

    <div class="dropdown__content"> 
     <a class="dropdown__item" href="#">Action Something else here</a></li> 
     <li><a class="dropdown__item" href="#">Another action</a></li> 
     <li><a class="dropdown-item" href="#">Something else here</a></li> 

     <div class="dropdown"> 
      <a href="#" class="dropdown__trigger">trig</a> 
      <div class="dropdown__content"> 
       <li><a class="dropdown-item" href="#">Action</a></li> 
       <li><a class="dropdown-item" href="#">Another action</a></li> 
       <li><a class="dropdown-item" href="#">Something else here</a></li> 
       <div class="dropdown"> 
        <a href="#" class="dropdown__trigger">Dropdown</a> 
        <div class="dropdown__content"> 
         <li><a class="button--primary dropdown-item" href="#">Action</a></li> 
         <li><a class="dropdown-item" href="#">Another action</a></li> 
         <li><a class="dropdown-item" href="#">Something else here</a></li> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div style="width:340px;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tincidunt nunc. Praesent eu sagittis 
     ex, eu viverra leo. Sed quam felis, tincidunt ut nibh in, condimentum aliquet enim. Etiam malesuada semper sem, 
     ac fermentum purus facilisis eu. Vestibulum ut ipsum tortor. Mauris non dui eu odio condimentum interdum. 
     Fusce commodo, nulla vitae vulputate 
     mollis, sapien massa convallis eros, id tempor lectus erat sit amet velit. Sed quis ante ut augue congue 
     malesuada vitae at ipsum. Nulla non libero eu risus elementum lobortis </p> 
</div> 
</div> 

どのように私はこの問題を解決することができていますか？あなたは.dropdown__contentクラスにこのスタイルを追加することができます

http://codepen.io/anon/pen/aJwKVg

Answer 1

（学び、理解することが、私は、メニューの多くはそこにある知っているが、私は自分のソリューションを作成します）。

white-space: nowrap; 

divのような要素の場合は、幅をautoに設定すると成功しました。ブロック要素を表示するときにその親に適合しようとしているので意味があります。しかし、ブロックを表示しているときにその幅をautoに設定すると、その内容から幅が取られます。