1

1 つのドロップダウンのみが列に分かれているドロップダウン メニューを作成しようとしています。その理由は、このリストはユーザーがスクロールしなければならないほど長いため、それを避けようとしているからです。そのグループの幅だけを変更しようとすると、すべての幅が変更されます。クラスとIDを試しましたが、何も機能していません。助言がありますか？これが私のコードです：

<li><a href="en.tests.html">Test Types</a>
<ul>
<li><a href="">Analytical Lab</a></li>
<li><a href="">Charpy Testing</a></li>
<li><a href="">Chemical Testing</a></li>
<li><a href="">Composite Testing</a></li>
<li><a href="">Corrosion Testing</a></li>
<li><a href="en.creep.html">Creep Testing</a></li>
<li><a href="">CTOD Testing</a></li>
<li><a href="">Fatigue Testing</a></li>
<li><a href="">Fastener Testing</a></li>
<li><a href="">Fracture Toughness</a></li>
<li><a href="">Heat Treat</a></li>
</ul>

CSS:

#nav ul li ul {
    width: 170px;
    }

この幅を変更すると、必要なメニューが作成されますが、すべてのナビゲーションが変更されます。グループだけを選択するにはどうすればよいですか?

4

1 に答える 1

0

グループをクラスで区別してから、目的のクラスにのみ CSS ルールを適用する必要があります。

<ul>
<li class="column1">
 <ul><li><a href="">Item1</a></li>
     <li><a href="">Item2</a></li>
 </ul>
</li>
<li class="column2>
 <ul><li><a href="">Item3</a></li>
     <li><a href="">Item4</a></li>
 </ul>
</li>
<li class="column3>
 <ul><li><a href="">Item5</a></li>
     <li><a href="">Item6</a></li>
 </ul>
</li>

次に、次のように CSS を適用します (2 列目)。

#nav ul li.column2 ul {
    width: 170px;
}

あなたの問題は、CSS ルールが一般的すぎることでした。より具体的にする必要があるため、列のクラスを追加する必要があります。

于 2012-05-21T13:33:57.977 に答える