html - 下拉导航

Question

我正在尝试创建一个下拉菜单，其中只有一个下拉菜单被分成几列。原因是因为这个列表太长了用户必须滚动，所以我试图避免这种情况。当我尝试仅更改 THAT 组的宽度时，它会更改所有宽度。我试过类(class)和 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 规则过于笼统，您需要更加具体，这就是您需要为列添加类的原因。