1

我正在尝试创建一个下拉菜单，其中只有一个下拉菜单被分成列。原因是这个列表太长了，用户必须滚动，所以我试图避免这种情况。当我尝试仅更改该组的宽度时，它会更改所有宽度。我已经尝试过课程和身份证，但没有任何效果。有什么建议么？这是我的代码：

<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（对于第二列）：

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

您的问题是 CSS 规则过于笼统，您需要更具体，这就是您需要为列添加类的原因。

于 2012-05-21T13:33:57.977 回答