html css menu and submenu

how to set different width for the submenu from menu ...... i want the submenu text not appear on 2-3 rows......

html code:

<ul><li><a href="#">Home</a></li>
<li><a href="#">Web Design</a>
  <ul>
  <li><a href="#">Site de prezentare</a></li>
  <li><a href="#">Site pentru anunturi</a></li>
  <li><a href="#">Site pentru ziare online</a></li>
  <li><a href="#">Site pentru agentie imobiliara</a></li>
  <li><a href="#">Site pentru agentie de turism</a></li>
  <li><a href="#">Magazin online</a></li>
  </ul>
</li>
<li><a href="#">Web Hosting</a></li>
<li><a href="#">Web Marketing</a></li>
<li><a href="#">Oferte speciale</a></li>
<li><a href="#">Clienti</a></li>
<li><a href="#">Contact</a></li>
</ul>

Code (markup):

css code:

* {  margin:0;
  padding:0;
  }
  
body {
   padding:0;
   }
   
ul {
  list-style:none;
  }
  
ul li {
  float:left;
  padding-right:1px;
  position:relative
  }
  
ul a {
   display:table-cell;
   padding:0 10 0 10;
   vertical-align:middle;
   width:100px;
   height:20px;
   text-align:center;
   background-color:black;
   text-decoration:none;
   color:white;
   }
   
ul a:hover {
   text-decoration:underline;
   }
   
li > ul {
   display:none;
   position:absolute;
   left:0px;
   top:100%;
   }
   
   
li:hover  > ul{
   display:block;
   position:absolute;
   width:auto;
   }
   
li > ul li {
   padding-top:1px;
   }

Code (markup):

 

Add this to your CSS :

ul li ul li {width: /*  Put some big value here, like 500px, since it won't change anything.  */}
ul li ul li a { display:inline}

Code (markup):

Make sure you also hide the overflow.

However, you may get confused by this code, so give it some class or ID.

 

Something like the following might help?

	ul a {
		display:table-cell;
		padding:0 10 0 10;
		vertical-align:middle;
		width:100px;
		height:20px;
		text-align:center;
		background-color:black;
		text-decoration:none;
		color:white;
		[COLOR="#FF0000"][B]white-space: nowrap;[/B][/COLOR] /* avoid line breaks at white-spaces */
	}

Code (markup):