Comment puis-je faire ce menu en utilisant uniquement ul, li et css?

Question

Je voudrais le faire en utilisant le CSS:

ssing seulement ulli et a éléments. Les balles rouges seraient invisibles.

Comment est-ce que je peux faire ceci? J'ai essayé d'utiliser float:left pour la liste horizontale des puces externes et une liste verticale normale pour les puces internes, mais cela n'a pas fonctionné.

Existe-t-il un meilleur moyen que la liste à puces?

Answer 1

Je vais juste jeter cela là-bas comme une solution viable. Pourquoi ne pas utiliser les éléments div? Voici un exemple:

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> 

Voici une démo: http://jsfiddle.net/a9m76/1/