下拉导航
下拉导航
提问于 2012-05-21 21:25:44
我正在尝试创建一个下拉菜单，其中只有一个下拉列表被分成多个列。原因是因为这个列表太长了，用户必须滚动，所以我尽量避免这种情况。当我尝试仅更改该组的宽度时，它会更改所有宽度。我已经尝试了类和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;
}当我更改此宽度时，它会创建我想要的菜单，但会更改所有导航。我如何才能只选择组？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-05-21 21:33:58
您应该使用类区分组，然后将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规则太通用了，你需要更具体，这就是为什么你需要为列添加类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10686150
复制相关文章
相似问题
腾讯云开发者
