向左浮动抑制 CSS 手风琴

Question

我有一个 CSS 手风琴菜单，它 100% 正确工作。但是我想将 div 向左浮动，当我将 Float:Left 添加到 CSS 时，手风琴停止工作。我哪里出错了？我尝试将 Clear:both 添加到 #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

将 "width: auto;" 设置为父级 "" .menu 即 .menu { 保证金：0；填充：0； width: auto;} 2. 为父 li 添加单独的 class，即 General 和 Logs .parent{float: left; 显示：内联块；}

向左浮动抑制 CSS 手风琴

Float Left Suppressing CSS Accordion

css

navigation

accordion