Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by ltoshea
ltoshea
845 Points

Is it possible to nest UL Class

Hi, I currently have a navigation bar with several links but also some social media buttons. The text lines up with the top of the social media buttons, ideally they would line up with the middle. I tried using nested statements like:

    <div class="grid_8 omega">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About Me</a></li>
<ul class="social>
            <li><a href="http://uk.linkedin.com/pub/liam-o-shea/46/b92/193/"><img src="img/social/linkedin.png" alt="Linkedin"></a></li>
            <li><a href="https://twitter.com/ltoshea"><img src="img/social/twitter.png" alt="Twitter"></a></li>
        </ul>
</ul>   
    </div>```

Since I thought it would be sensible in the CSS to add extra margin to "ul.nav li " and not to "ul.nav.social li" however it just ended up putting the buttons underneath the text. I'm looking for a horizontal navigation bar so this defeats the object.

Can anyone offer any suggestions? Can I legitimately nest?
I would like to point out I need to stick to reasonably strict web standard in case this will affect your answer.
Apologies if this is quite vague, I'm new to web design but not programming.

2 Answers

Richmond Lauman
Richmond Lauman
28,793 Points

Hi Liam. It is perfectly fine to nest lists . However, do not do it the way you did in your example. If you nest a list in a list you should nest it between list item tags like so:

 <ul class="nav">
 <li><a href="#">Home</a></li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About Me</a></li> 
<li><a href="#">Social
<ul class="social> 
<li><a href="http://uk.linkedin.com/pub/liam-o-shea/46/b92/193/"><img src="img/social/linkedin.png" alt="Linkedin"></a></li>
 <li><a href="https://twitter.com/ltoshea"><img src="img/social/twitter.png" alt="Twitter"></a></li> 
</ul>
</li>
 </ul>
ltoshea
ltoshea
845 Points
ltoshea
ltoshea
845 Points

Could you please explain why this is the best way? I tried it and couldn't get the appearance I wanted to so went back to doing it as above.

edit: More specifically why the syntax above is wrong and why I would be nesting lists inside lists. My only reason for creating <ul class="social"> is so I can reference it in a .css file. Thanks