html - 空白 : Nowrap float issue

Question

我有一个希望很简单的问题，但我只是想得太复杂了。

Here is a Fiddle to demonstrate my issue.

在上面的 fiddle 中，您将看到弹出菜单设置。在顶部选项上，您将看到一个放大的第一个选项，其中有一个损坏的 float 。这就是我的问题所在。 我需要这些元素在不破坏容纳它们的列表容器的情况下并排 float 。

我知道 white-space:nowrap 导致容器空间中断，但是，每当我尝试删除该元素时，我似乎无法让我的 float 兑现。我确信这对我来说是一个简单的失误，因为考虑到它周围的事情，但在此方面的任何进步都是值得赞赏的，并希望对某人来说是一个轻松的过程。

CSS:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

#nav{margin:0;padding:0;position:relative;float:left;}
#nav li {list-style:none;}
#nav a {
    color:#fff;
    display:block;
    line-height:2.4;
    padding:0 1em;
    text-decoration:none; 
    border-bottom:1px solid #eee;
}
      /* FLYOUT */
      .sub  {
        top:0;
        margin:0;
        padding:0;
        left:100%;
        display:none;
        min-height:100%;
        position:absolute;
        white-space:nowrap;
        border-left:2px solid #eee;
      }
      #nav li:hover .sub {
        display:block;
      }

        #nav li:hover .sub .sub {
          display:none;
        }

          #nav .sub li:hover .sub{
            display:block;
          }

      .sub a:hover {
        color:#fff;
        background:#333; 
      }
      
      .sub img { min-width:120px; float:left; }
      .sub .content { float:left; }


/*-- COLORS NOT NEEDED ON LIVE--*/
.first{background:#aaa;}
.second {background:#bbb;}
.third {background:#ccc;}
.fourth {background:#ddd;}
.fifth {background:#aaa;}
.sixth {background:#bbb;}
.seventh {background:#ccc;}
.eighth {background:#ddd;}
.nineth {background:#aaa;}
.tenth {background:#bbb;}
.all {background:#000}

<div id="nav">
    <li><a class="first" href="#">Level 1 Option</a>
      <ul class="sub first">   
          <li class="clearfix"><a href="#">
            <div class="float">
            <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9780&w=120&h=80" alt=""></div>
            <div class="">
              <h5>This will be a title</h5>
              <p>
                <strong>Sub-title</strong><br>
                Specs<br>
                <strong>Sub-title</strong><br>
                Specs
              </p>
            </div>
          </a>
            <ul class="sub first">   
              <li><a href="#">Option 1</a></li>
              <li><a href="#">Option 1</a></li>
              <li><a href="#">Option 1</a></li>
              <li><a href="#">Option 1</a></li>
            </ul>  
          </li>
          <li><a href="#">Option 2</a>
            <ul class="sub first">   
              <li><a href="#">Option 2</a></li>
              <li><a href="#">Option 2</a></li>
              <li><a href="#">Option 2</a></li>
              <li><a href="#">Option 2</a></li>
            </ul>  
          </li>
      </ul>
      </li>
    <li><a class="second" href="#">Level 1 Option</a>
      <ul class="sub second">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
      </ul>
    </li>
    <li><a class="third" href="#">Level 1 Option</a>
      <ul class="sub third">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
      </ul>
    </li>
    <li><a class="fourth" href="#">Level 1 Option</a>
      <ul class="sub fourth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="fifth" href="#">Level 1 Option</a>
      <ul class="sub fifth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="sixth" href="#">Level 1 Option</a>
      <ul class="sub sixth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="seventh" href="#">Level 1 Option</a>
      <ul class="sub seventh">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="eighth" href="#">Light Duty</a>
      <ul class="sub eighth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="ninth" href="#">Level 1 Option</a>
      <ul class="sub ninth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="tenth" href="#">Level 1 Option</a>
      <ul class="sub tenth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="all" href="#">View All</a>
    </li>
</div>

Answer 1

从 float div 中的图像左侧移除 float 。并在那里添加一些边距。

CSS:

.sub img {
   min-width: 120px;
   /* float: left; */ //Remove this line
   margin-top: 10px;
}