无法将垂直菜单列表移动到最左侧，它位于水平菜单列表下方

Question

css新手。尝试用列表创建水平和垂直菜单。 我在水平方向下的垂直列表到达下一行，但它从水平菜单结束的位置开始，如缩进选项卡。 如何让垂直菜单向左走？

css和html代码：

ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 1.2em;
  margin-left: 20px;
  list-style-type: none;
}
li {
  background-image: url(../images/listimage.jpg);
  background-repeat: no-repeat;
  background-position: 0% 50%;
  margin: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 16px;
}
.clearfloat {clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
}
#horizontal_M  {
  color: #FFFFFF;
  background-color: #272910;
  background-image: url(../images/btn.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  width: 100%;
  height: 31px;
}
#vertical_M   {
  background-color: #EEF0E3;
  background-image: url(../images/sidemenubg.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  margin-left: 15px;
  padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 14px;
  padding-left: 0px;
  float: left;
  width: 200px;
}

<div id="horizontal_M">
  <ul>
    <br class="clearfloat" />

    <li><a href="index.html">link 1/a></li>
    <li><a href="index.html">link 2</a></li>
    <li><a href="index.html">link 3</a></li>
    <li><a href="index.html">link 4</a></li>
  </ul>

</div>

<div id="vertical_M">
  <ul>

    <li><a href="index.html">link 1</a></li>
    <li><a href="index.html">link 2</a></li>
    <li><a href="index.html">link 3</a></li>
    <li><a href="index.html">link 4</a></li>
  </ul> 
</div>

Answer 1

您不需要容器div。可以设置<ul>的样式。

横向<li>应为float: left;

垂直<ul>设置clear:left;