KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
My navigation structure looks like this: <div class="menu"> <ul> <li><a href="#">Page 1</a></li> <li><a href="#">Page with Subpages</a> <ul class="children"> <li><a href="#">Page with another subpage</a> <ul class="children"> <li><a href="#">subsubpage</a></li> </ul> </li> </ul> </li> <li><a href="#">Page 3</a></li> <li><a href="#">Page 4</a></li> </ul> </div> I want all <li> 's that have a subnavigation children to have a little down-arrow applied so users know this page has subpages. Is it possible to detect in pure css if a <li> has children of ul.children ? In my example above, the "Page with Subpages" should have the down arrow applied and the "Page with another subpage" as well. Right now I'm using jquery to solve this problem: $(function() { $('.menu a').each(function() { if ( $(this).parent('li').children('ul').size() > 0 ) { $(this).append('<span class="dwn">▼</span>'); } }); }); Is there an easy pure CSS way to do so? Thank you.
Tags (comma-separated)
Save Edits
Cancel