title: Changing Horizontal menu to vertical menu
body: <p>I here is my code for horizontal menu. Now i want to change this into vertical menu. I am not getting how to do. Please help me how to do it.
  I tried changing the width but not happening. I am not getting where to edit <code>&lt;ul&gt;&lt;li&gt;</code> tags to change it to vertical.
  Please suggest me</p>
  
  <pre class="lang-css prettyprint-override"><code>#menu {
      background: url('../image/menu.png') repeat-x;
      position: relative;
      z-index: 1;
      height: 34px;
      clear: both;
      padding: 0px 30px;
      min-width: 900px;
  }
  #menu &gt; ul.left {
      float: left;
  }
  #menu &gt; ul.right {
      float: right;
  }
  #menu &gt; ul {
      position: relative;
      margin: 0;
      padding: 0;
  }
  #menu &gt; ul ul {
      list-style: none;
      margin: 0;
      padding: 0;
      background: url('../image/transparent.png');
  }
  #menu &gt; ul a {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 5px;
  }
  #menu &gt; ul &gt; li + li {
      background: url('../image/split.png') center left no-repeat;
  }
  #menu &gt; ul .top, #menu &gt; ul li li.sfhover {
      padding: 10px 15px 9px 17px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #FFFFFF;
      text-align: center;
  }
  #menu &gt; ul ul li {
      padding: 2px;
  }
  #menu &gt; ul .selected .top {
      background: url('../image/selected.png') repeat-x;
      color: #FFFFFF;
  }
  #menu &gt; ul .selected:hover a.top, #menu &gt; ul .sfhover a.top {
  }
  #menu &gt; ul .parent {
      background: url('../image/arrow-right.png') 95% center no-repeat;
  }
  #menu &gt; ul li {
      float: left;
      list-style: none;
  }
  #menu &gt; ul li ul {
      position: absolute;
  }
  #menu &gt; ul li li {
      clear: both;
  }
  #menu &gt; ul li ul a {
      color: #FFFFFF;
      height: 15px;
      width: 145px;
  }
  #menu &gt; ul li ul ul {
      margin: -27px 0 0 157px;
  }
  #menu &gt; ul li li:hover, #menu &gt; ul li li.sfhover {
      background: #333;
      color: #000000;
  } 
  </code></pre>