下拉导航

Question

我正在尝试创建一个下拉菜单，其中只有一个下拉列表被分隔为列。原因是因为这个列表很长，用户必须滚动，所以我试图避免这种情况。当我尝试仅改变THAT组的宽度时，它会改变所有宽度。我已经尝试过课程和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;
    }

当我更改此宽度时，它会创建我想要的菜单，但会更改所有导航。我怎样才能选择该组？

Answer 1

您应该将组与类区分开来，然后将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规则过于笼统，您需要更具体，这就是您需要为列添加类的原因。