Ist für eine verschachtelte Liste eine Mindestbreite erforderlich?

Question

Ich habe eine verschachtelte Liste wie:

<ul> 
    <li> 
     <a href="#" class="">Parent Links</a> 
     <!-- Flyoutwrapper is what expands when users hover over the parent links, the contents of flyoutwrapper will be changing, so I can not set a min-width or width --> 
     <div class="flyoutWrapper"> 
     <ul class="flyout fourCol"> 
      <li></li> 
      <li></li> 
     </ul> 
     </div> 
    </li> 
</ul> 

Ich möchte der Innenseite der alle li von class = „Flyout fourCol“ nebeneinander schweben. In Spalten. Aber wenn ich für "flyout fourCol" keine Mindestbreite von ~ 900px einstelle, fällt jedes li-Element unter das vorherige.

Dies ist, was ich meine Drop-Down aussehen soll:

#nav .flyout.fourCol { min-width:900px; } 

http://jsfiddle.net/t7esz/ (das funktioniert)

#nav .flyout.fourCol { width:auto; } 

http://jsfiddle.net/sumcA/2/ (das funktioniert nicht!)

Answer 1

In Ihrem Fall Ja, weil Ihr .flyout Untermenü die Breite von seinem Elternteil erbt, Ihre "Hochzeiten" li, die keine Breite vonhaben. Wenn Sie die Breite von Ihrem flyout div entfernen und es Ihrem übergeordneten Element "weddings" hinzufügen, li erbt Ihr Untermenü dieselbe Breite und muss nicht explizit eine Breite angegeben werden Ihre Antwort lautet also yes, Sie müssen Ihrem Untermenü eine Breite hinzufügen, damit es der eigenen Breite entspricht, andernfalls wird es vom übergeordneten Element geerbt.