Question

我有一个CSS手风琴菜单，100％正确工作。但是我想把div放到左边，当我添加Float：Left到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

设置＆＃34;宽度：自动;＆＃34;父母＆＃34;＆＃34; .menu即.menu { 保证金：0; 填充：0; width：auto;} 2.为父li添加单独的类，即General和Logs .parent {float：left; display：inline-block;}

浮动左侧抑制CSS手风琴

1 个答案: