Hi, Can you help me please, how can i display my subitems to the left side and also how can i put scrollbar on it if the subitems are too long.

More help will be greatly appreciated.



Code:
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li a:first-letter{
 text-transform: uppercase;

}

.nav > li{
   float: left;
   margin-right: #959597 0.1em;
   min-width: 8em;
   text-align: center;
   background-color: #FFF;
   border:solid 1px #959597;
}

.nav li a:link,
.nav li a:visited{
  text-decoration: none; 
  color: #606061;
  display: block;
}

.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

 .nav ul li,
 .nav #scroll1div ul li,
 #scroll1,#scroll2,#scroll3{
  display: none;
}

.nav li:hover  li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
  display: block;
  text-align: justify;
  color: #606061;
}

.nav ul li{
  border: solid 1px #959597;
}

.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
  color: #FFF;
  background-color: #E56500;
}

.nav li:hover li a{
  color: #777777;
  background-color: #d2cb08;
}

.nav li:hover  li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
    display: block;
    text-align: justify;
    color: #606061;
    left: 100%;
    top: 0;
}


Code:
<!Doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 
 <link rel="stylesheet" href="menu2.css" style="text/css">
 
</head>

 <body>
    <ul class="nav">
       <li><a href="#">home</a>
			<ul>
				<li><a href="#">how</a></li>
				<li><a href="#">where</a></li>
				<li><a href="#">when</a></li>
			</ul>
		</li>
	   <li><a href="#">about</a>
          <div style="overflow:auto;height:200px;" id="scroll1">
               <ul>
                   <li><a href="#">A</a></li>
                   <li><a href="#">B</a></li>
                   <li><a href="#">C</a></li>
                   <li><a href="#">D</a></li>
                   <li><a href="#">E</a></li>
                   <li><a href="#">F</a></li>
                   <li><a href="#">G</a></li>
                   <li><a href="#">H</a></li>
                   <li><a href="#">I</a></li>
                   <li><a href="#">J</a></li>
                   <li><a href="#">L</a></li>
                   <li><a href="#">M</a></li>
                   <li><a href="#">N</a></li>
                   <li><a href="#">O</a></li>
                   <li><a href="#">P</a></li>
                   <li><a href="#">Q</a></li>
               </ul>
          </div>
       </li>

	    <li><a href="#">when</a></li>


	   <li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a>
                  <div style="overflow:auto;height:200px;" id="scroll2">
                      <ul>
                          <li><a href="#">A</a></li>
                          <li><a href="#">B</a></li>
                          <li><a href="#">C</a></li>
                          <li><a href="#">D</a></li>
                          <li><a href="#">subitems</a>
                              <div style="overflow:auto;height:200px;" id="scroll3">
                                  <ul>
                                      <li><a href="#">A</a></li>
                                      <li><a href="#">B</a></li>
                                      <li><a href="#">C</a></li>
                                      <li><a href="#">D</a></li>
                                      <li><a href="#">E</a></li>
                                      <li><a href="#">F</a></li>
                                      <li><a href="#">G</a></li>
                                      <li><a href="#">H</a></li>
                                      <li><a href="#">I</a></li>
                                      <li><a href="#">J</a></li>
                                      <li><a href="#">L</a></li>
                                      <li><a href="#">M</a></li>
                                      <li><a href="#">N</a></li>
                                      <li><a href="#">O</a></li>
                                      <li><a href="#">P</a></li>
                                      <li><a href="#">Q</a></li>
                                  </ul>
                              </div>



                          </li>
                          <li><a href="#">F</a></li>
                          <li><a href="#">G</a></li>
                          <li><a href="#">H</a></li>
                          <li><a href="#">I</a></li>
                          <li><a href="#">J</a></li>
                          <li><a href="#">L</a></li>
                          <li><a href="#">M</a></li>
                          <li><a href="#">N</a></li>
                          <li><a href="#">O</a></li>
                          <li><a href="#">P</a></li>
                          <li><a href="#">Q</a></li>
                      </ul>
                  </div>
              </li>
			  <li><a href="#">Domain Names</a></li>
			  <li><a href="#">Broadband</a></li>
		  </ul>
	   </li>

    </ul>	

 </body>
</html>