ドロップダウンサブメニューの自動幅が機能しない

Question

私は単純なドロップダウンメニューを持っています。サブメニューの項目が大きかったり小さかったりする場合は、サブメニューの幅を必要とします。

今、それは二行に折り返さ..私は幅試した

https://jsfiddle.net/nyb44xbd/1/

を参照してください：自動;動作しません。

CSS：

.dropdown { 
    position: relative; 
    display: inline-block; 
    margin:0 12px; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background:white; 
    width:auto; 

    padding: 12px 16px; 
    z-index: 1; 

} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.subm{margin:12px 0;} 

MY HTML：

<div class="dropdown"> 
    <span>PRODUCT INFO</span> 
    <div class="dropdown-content"> 
     <div class="subm"><a class="menulink" href="#ingredients">INGREDIENTS</a></div> 
     <div class="subm"><a class="menulink subm" href="#ingredients">CUSTOMER REVIEWS</a></div> 
     <div class="subm"><a class="menulink subm" href="#ingredients">NUTRITIONAL FACTS</a></div> 
     <div class="subm"><a class="menulink subm" href="#ingredients">ORDER NOW</a></div> 
    </div> 
</div> 

おかげ

Answer 1

あなたは、本体と幅を変えることができ、このようにposition:relativeを置くことができます。

https://jsfiddle.net/0huz4dam/

Answer 2

.dropdownにposition: relativeを使用してみてください。以下のスニペットを参照してください。

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0 12px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background: white; 
 
    width: auto; 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.subm { 
 
    margin: 12px 0; 
 
}

<div class="dropdown"> 
 
    <span>PRODUCT INFO</span> 
 
    <div class="dropdown-content"> 
 
    <div class="subm"><a class="menulink" href="#ingredients">INGREDIENTS</a></div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">CUSTOMER REVIEWS</a></div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">NUTRITIONAL FACTS</a></div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">ORDER NOW</a></div> 
 
    </div> 
 
</div>

Answer 3

ちょうどあなたに感謝、それは

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0 12px; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    background: white; 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.subm { 
 
    margin: 12px 0; 
 
}

<div class="dropdown"> 
 
    <span>PRODUCT INFO</span> 
 
    <div class="dropdown-content"> 
 
    <div class="subm"><a class="menulink" href="#ingredients">INGREDIENTS</a> 
 
    </div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">CUSTOMER REVIEWS</a> 
 
    </div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">NUTRITIONAL FACTS</a> 
 
    </div> 
 
    <div class="subm"><a class="menulink subm" href="#ingredients">ORDER NOW</a> 
 
    </div> 
 
    </div> 
 
</div>