Creating Horizontal CSS Menus

[Curiosityx]

Hello there i have the following Css snipet and html code, at present it creates a vertical menu but im after a horizontal menu, if anyone could lend a hand it would be appreciated

<div id="buttonscontainer1"> 
			<div class="buttons4">
			<a href="#">Home Page</a> 
			<a href="#">About Us</a> 
			<a href="#">Contact Us</a> 
		  </div>
        </div>

.buttonscontainer {width: 150px;}

.buttons a {display: block;
width: 100%;
font: 10px Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
padding-left: 3px;
background-color: #234A76;
color: #FFFFFF;
border-left: 12px solid #B8C8D8;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;}

.buttons a:hover {border-left: 12px solid #E8ECF0;
text-decoration: none;
color: #FFFFFF;}

As i understand it the best way is too use un-ordered lists?

 

[Curiosityx]

			<div class="buttons">
			<ul>
			<li><a href="#">Home Page</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			</ul>
		    </div>

The container is too thin, so they are forced down.

Please could you explain?

 

[Curiosityx]

Well after a some experimentation

}
	.menu {
      width: 100%;
      padding: 0px 0.5em;
      background: #eee none;
    }
   .menu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
   .menu li {
      margin: 0;
      padding: 0;
      float: left;
    }
    .menu {
      padding: 0;
      background: #fff none;
    }
    .menu li {
      width: 7em;
      margin-right: 1em;
      background: #eee none;
      text-align: center;
    }
    .menu a {
      	width: 120px;
		font: 9px Verdana, Arial, Helvetica, sans-serif;
		padding: 2px;
		padding-left: 5px;
		background-color: #234A76;
		color: #FFFFFF;
		border-left: 16px solid #B8C8D8;
		font-weight: bold;
		text-decoration: none;
		text-align: left;
		margin-top: 1px;}
    }
    .menu a:hover {{border-left: 16px solid #FF0000;
		text-decoration: none;
		color: #FFFFFF;}
    }

<div class="menu"> 
        <ul>
          <li><a href="Index.htm">Home</a></li>
          <li><a href="Cp_profile.htm">Company Profile</a></li>
          <li><a href="Products.htm">Products</a></li>
          <li><a href="Contact_Us.htm">Contact Us</a></li>
        </ul>
        <br clear="left">
      </div>

Works now