ULを使用して水平サイトマップを作成するにはどうすればよいですか？

Question

私はCSSとUL/LIを使ってこのウェブページwww.telia.dk（下部）のようにフッタサイトマップを作成する方法を今数時間試してきました。

私はCSSのnoobですので、私を助けてください。

ここでは例の木...

<ul> 
    <li> 
     <ul> 
      <li>Color/li> 
      <li>Red</li> 
      <li>Blue</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li>Fruit</li> 
      <li>Apple</li> 
      <li>Banana</li> 
      <li>Lemon</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li>Weekdays</li> 
      <li>Monday</li> 
      <li>Friday</li> 
      <li>Saturday</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li>Numbers</li> 
      <li>1</li> 
      <li>2</li> 
     </ul> 
    </li> 
</ul> 

はwww.telia.dkの下部にあるような外観上の私のULを作るためにどのようにどれidaeですか？

Answer 1

1つの可能な方法は、このような何か（.hMenuがここに外ulである）である：それは確かに勝った、これは容易に製造に使用することができるものではないことに注意してください

.hMenu > li { /* for direct childs (>) of .hMenu that are li-s */ 
    /* inline-block will make them inline but also block - the best of both :) */ 
    display: inline-block; 
    /* they will align themselves to each other's top */ 
    vertical-align: top; 
    /* just a little horizontal margin */ 
    margin: 0 10px; 
} 
.hMenu ul li:first-child { /* for the first li-s in inner ul-s */ 
    /* we make them bold */ 
    font-weight: bold; 
} 

jsFiddle Demo

IE6/7では動作しません。あなたは偉大なcompatibility tables on Quirksmode見つけることができます。

display: inline-block;ではなく、floatの使用を検討することもできます。

Answer 2

this demo fiddleのような意味ですか？

HTML：

<div id="footer"> 
    <ul> 
     <li> 
      <ul> 
       <li>Color</li> 
       <li>Red</li> 
       <li>Blue</li> 
      </ul> 
     </li> 
     <li> 
      <ul> 
       <li>Fruit</li> 
       ... 

CSS：

#footer ul { 
    list-style: none; 
} 
#footer>ul>li { 
    float: left; 
    width: 120px; 
} 
#footer ul li ul li:first-child { 
    font-weight: bold; 
} 

Answer 3

あなたは自分のコードを見れば、あなたが本当に必要なのはある

ul > li { 
    float:left; 
    width:140px; 
} 

が最初に適用されるべきですulのli

フィドル：http://jsfiddle.net/jzpcW/