Float Left Подавление CSS Accordion

Question

У меня есть меню аккордеона CSS, которое работает на 100% правильно. Однако я хочу плавать div слева, и когда я добавляю Float: Left to the CSS, аккордеон перестает работать. Любые идеи, в которых я ошибаюсь? Я попытался добавить Clear: оба в #menu_box, но без успеха.

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> <a href="#">General</a> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="settings.php">Update Details</a></li> 
       <li><a href="changepassword.php">Change Password</a></li> 
      </ul> 
     </li> 
     <li> <a href="#">Logs</a> 
      <ul> 
       <li><a href="easyjet.php">EasyJet Booking Log</a></li> 
       <li><a href="invoices.php">Invoice Log</a></li> 
       <li><a href="pricematch.php">Price Match Log</a></li> 
       <li><a href="tid.php">TID Log</a></li> 
       <li><a href="transavia.php">Transavia Booking Log</a></li> 
       <li><a href="villas.php">Villa Booking Log</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Fiddle.

Answer 1

1. комплект "ширина: авто;" к родительскому "" .menu i.e., .menu { margin: 0; прокладка: 0; width: auto;} 2. Добавить отдельный класс для родительского li i.e, General и Logs .parent {float: left; дисплей: встроенный блок;}