How can I make this menu using only ul, li and css?

Question

I would like to do this using CSS:

Ssing only ul li, and a elements. The red bullets would be invisible.

How can I do this? I've tried using float:left for the horizontal outer bullet list and a normal vertical bullet list for the inner one, but it did not works.

Is there a better way than bullet list?

Answer 1

I'm just going to throw this out there as a viable solution. Why not use div elements? Here's an example:

CSS --

.container {
    width   : 400px;
    margin  : 0;
    padding : 0;
}
.col {
    display : inline-block;
    width   : 100px;
    vertical-align : top;
}
.col.double {
    width : 200px;
}

HTML --

<div class="container">
    <div class="row">
        <div class="col">9</div>
        <div class="col">0</div>
        <div class="col">TITLE</div>
    </div>
    <div class="row">
        <div class="col double">{image}</div>
        <div class="col">text text text text text text text text text text text text text text text text text text </div>
    </div>
</div>

Here is a demo: http://jsfiddle.net/a9m76/1/