List Items on a single line in the drop-down menu

Question

I have a drop-down menu in which I want some list items to be on the same line.

See demo

You will notice that there are 9 lines in the Tab One section. I want each line to have three lines with three elements. How can this be done in CSS?

HTML:

 <div id="wrapper"> <ul id="menu"> <li><a href="#">Tab One</a> <ul style="width: 300%;"> <li><a href="#">Column one</a></li> <li><a href="#">Column one</a></li> <li><a href="#">Column one</a></li> <li><a href="#">Column two</a></li> <li><a href="#">Column two</a></li> <li><a href="#">Column two</a></li> <li><a href="#">Column three</a></li> <li><a href="#">Column three</a></li> <li><a href="#">Column three</a></li> </ul> </li> <li><a href="#">Tab Two</a> <ul style="position: relative; left: -100%; width: 300%"> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 2</a></li> </ul> </li> <li><a href="#">Tab Three</a> <ul style="position: relative; left: -200%; width: 300%"> <li><a href="#">Tab 3</a></li> <li><a href="#">Tab 3</a></li> <li><a href="#">Tab 3</a></li> </ul> </li> </ul> </div> 

CSS

 body { font-family: arial; margin: 0px; padding-left: 40px; padding-right: 40px; } #wrapper { text-align: center; height: auto; margin: auto; min-width: 500px; } #wrap { display: inline; } ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } #menu > li { display: block; position: relative; float: left; width: 33.3%; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #1e7c9a; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #3b3b3b; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 14px; } li:hover a { background: #3b3b3b; } li:hover li a:hover { background-color: black; opacity: .7; } 

Answer 1

Working example: http://jsfiddle.net/w7a3N/5/

Remove > from #menu > li { and set the internal <li> to <li style="width: 33%;">

Not sure if style="width:33%;" absolutely necessary because it works in Firefox 20 without it, but only in order to be safe.

UPDATE

You asked for a version that contains only a few columns under the first tab. Here you are:

http://jsfiddle.net/w7a3N/6/

First give the id tab, for example, <ul id="tab1" , and then add it to the CSS:

 #tab1 li{ display: block; position: relative; float: left; width: 33%; }