如何仅使用ul，li和css创建此菜单？

I would like to do this using CSS:

我想用CSS做到这一点：

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

只有ul li和一个元素。红色子弹将是看不见的。

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.

我怎样才能做到这一点？我已经尝试使用float：left为水平外部子弹列表和正常垂直子弹列表为内部列表，但它不起作用。

Is there a better way than bullet list?

有比子弹列表更好的方法吗？

1 个解决方案

#1

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

我只想把它作为一个可行的解决方案。为什么不使用div元素？这是一个例子：

CSS --

CSS -

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

HTML --

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/

这是一个演示：http：//jsfiddle.net/a9m76/1/