html - の中に何かを揃える方法は?

Question

ここにとても良いメニューがあります：

http://jsfiddle.net/y9jbQ/

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
            <ul class="nav">
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

問題は今です。他のサブメニューがある場合に備えて、右に揃えられた右矢印の画像が必要だとしましょう。中に入れるのは健康的なことではありません。の動作をコピーするものを作成したくありません。そう、

<li><a href="/something"><div float left><div float right></a></li>

良い方法ではありません。

Answer 1

CSS 子セレクターを使用します。

ul.root > li > a { /* css declarations */ }

ulこれは、ルート要素の直系の子孫にのみルールを適用します。

---

図：

<ul class="root">
    <li>
        <a href="#"><!-- MATCH --></a>
    </li>
    <li>
        <a href="#"><!-- MATCH --></a>
        <ul>
            <li>
                <a href="#"><!-- NO MATCH --></a>
            </li>
        </ul>
    </li>
</ul>