Question

new to css. trying to create horizonal and vertical menus with list.
my vertical list under the horizontal one goest to the next line, but it starts off where the horizontal menu ends like an indention tab.
how do i get the vertical menu to go far left?

css and html code:

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

You don’t need the container divs. Can style the <ul> instead.

Horizontal <li> should be float: left;

Vertical <ul> set clear:left;