title: Float Left Suppressing CSS Accordion
body: <p>I have a CSS accordion menu which works 100% correctly. However I want to float the div left and when I add Float:Left to the CSS, the accordion stops working. Any ideas where I'm going wrong? I tried adding Clear:both to #menu_box but no success.</p>
  
  <p>CSS:</p>
  
  <pre><code>#menu_box {
      float: left;
  }
  
  .menu {
    margin: 0;
    padding: 0;
    width: 200px;
  }
  
  .menu li {
      list-style: none;
  }
  
  .menu li a {
    display: table;
    margin-top: 1px;
    padding: 14px 10px;
    width: 100%;
    background: #337D88;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    color: #fff;
    overflow: hidden;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
  }
  
  .menu &gt; li:first-child a {
      margin-top: 0;
  }
  
  .menu li a:hover {
    background: #4AADBB;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
  }
  
  .menu li ul {
    margin: 0;
    padding: 0;
  }
  
  .menu li li a {
    display: block;
    margin-top: 0;
    padding: 0 10px;
    height: 0;
    background: #C6DDD9;
    color: #1F3D39;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
  }
  
  .menu &gt; li:hover li a {
    display: table;
    margin-top: 1px;
    padding: 10px;
    width: 100%;
    height: 1em;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }
  
  .menu &gt; li:hover li a:hover {
    background: #A4CAC8;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="menu_box" style="clear:both;"&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt; &lt;a href="#"&gt;General&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="settings.php"&gt;Update Details&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="changepassword.php"&gt;Change Password&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Logs&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="easyjet.php"&gt;EasyJet Booking Log&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="invoices.php"&gt;Invoice Log&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pricematch.php"&gt;Price Match Log&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="tid.php"&gt;TID Log&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="transavia.php"&gt;Transavia Booking Log&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="villas.php"&gt;Villa Booking Log&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/o1n6vtrq/" rel="nofollow">Fiddle</a>.</p>