2011-07-16 17 views
1

私はここで疑似クラスを試していて、通常はスタイルクラスで何かをしようとしています。私は、順序付けされていない複数のリストを持つ順不同リストを持っています。リストの疑似クラス

タグの最初のレベルが左に浮動するように設定したいだけです。 ここに私のhtmlです

<body> 
<div id="MainMenu"> 
    <ul id="nav"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <a href="#">About</a> 
      <ul> 
       <li><a href="#">The Product</a></li> 
       <li><a href="#">Meet The Team</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Contact</a> 
      <ul> 
       <li> 
        <a href="#">Business Hours</a> 
        <ul> 
         <li><a href="#">Week Days</a></li> 
         <li><a href="#">Weekends</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Directions</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
</body> 

私はこのようなスタイルを試みました。

body { 
    font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif; 
    margin:0; 
    padding:0 
} 

#nav{ 
    list-style:none; 
    font-weight:bold; 
    width:100%; 

} 

#nav li{ 
    float:left; 
    margin-right:40px; 
    position:relative; 
} 

この問題は、id navのすべてのli子孫が左に浮動するということです。今私は、最初のレベルのliタグを左に浮かべ、他のすべてのレベルのliタグを無視するだけです。すべてのトップレベルのliタグにクラス名を使用すると答えてください。私はすでに私がこれのようにそれにアプローチできることを知っています。私がしたのは、疑似クラスのいくつかを学び、このアプローチで私がどのように役立つかということです。

たとえば、#nav li:first-child {....}のようなものが必要ですが、これはトップulリストの最初のliを与えるだけです。私はulリストのすべてのトップレベルの子供を望んで、第2レベルを無視するliタグなど。これを達成できる擬似クラスがありますか?

おかげ

+0

擬似クラスは、CSS3では新しいものではありません。 – BoltClock

答えて

3

あなたは、これが#navの直接のli子であるすべての要素にマッチし#nav > liを使用することができます。

詳細情報hereおよびhere

デモ:http://jsfiddle.net/9M6p2/

+1

完璧なこれはまさに私が後にしているものです。だから私が次のレベルに到達したいなら、私はこのようなことをやるだろう。 ul> li> – Chapsterj

+0

@Chapsterj:それはまさに:-) – Bojangles

+0

ul> liで最初のレベルで働いていましたが、2番目のレベルでul> li>を試したところ、すべての浮動が止まったのですか? – Chapsterj

0

すでにやると#nav li ulまたは#nav li ul liのようなあなたは、セカンドレベルLI-要素のスタイルを#nav liを使用することができます。

+1

#nav li ulは最初のレベルの後にすべてをスタイルします。私は最初のレベルを探していた後ではなかった。 – Chapsterj

1

良いアプローチは、次のようになります。

#nav li { float: left; } 
#nav li li { float: none; } 
+0

非常にクールで、これもIEで動作します。 – Chapsterj

+0

それでも重要なIEのバージョンには '>'もあります。 – BoltClock

関連する問題