Question

I’m trying to create a drop down menu, where only ONE drop down is separated into columns. The reason is because this list is so long a user has to scroll, so I’m trying to avoid that. When I attempt to change just the width of THAT group, it changes all of the widths. I’ve tried classes and Id’s and nothing is working. Any suggestions? Here is my code:

<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;
    }

When I change this width it creates the menu I want, but changes all navigation. How can I choose just the group?

Answer 1

You should differenciate the groups with a class, then apply the CSS rule only to the desired class:

<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>

Then apply the CSS like this (for the second column):

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

Your problem was that the CSS rule was too general, you need to be more specific and that’s why you need to add class for columns.