Float Left Suppressing CSS Accordion - css

Question

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.
CSS:
#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 > 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 > 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 > 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;
}
HTML:
<nav id="menu_box" style="clear:both;">
<ul class="menu">
<li> General
<ul>
<li>Home</li>
<li>Update Details</li>
<li>Change Password</li>
</ul>
</li>
<li> Logs
<ul>
<li>EasyJet Booking Log</li>
<li>Invoice Log</li>
<li>Price Match Log</li>
<li>TID Log</li>
<li>Transavia Booking Log</li>
<li>Villa Booking Log</li>
</ul>
</li>
</ul>
</nav>
Fiddle.

Answer 1

set "width: auto;" to parent "" .menu i.e., .menu {
margin: 0;
padding: 0;
width: auto;} 2. Add separate class for parent li i.e, General and Logs .parent{float: left;
display: inline-block;}