1

I have my nav in a loop for a CMS. I want to add a chevron arrow to the li that opens a submenu, but im having trouble targeting it, because the ul is added with an if statement e.g <% if Children %>.

So I want to add the chevron via css

a:before {
   font-family: FontAwesome;
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

What would that css style be? its for the third sub menu so I was thinking something along the lines of

nav ul ul > li > ul

^ Im aware that makes no sense.

enter image description here

So in that image notice how all the ul ul li elements have a chevron. thats my issue. I only want the li that contains a submenu to get a cheveron.

Sorry the explanations a bit messy - all ideas welcome, prefferably css, but i can work in javascript if its the only way to go!

this is my navigation code if it helps

<div class="navigation-container">

            <ul>     
                <% control Menu(1) %>                   
                    <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle </a>                   
                      <% if Children %> 

                          <ul> 
                              <% control Children %> 
                                  <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle </a> 
                                     <% if Children %>

                                         <ul> 
                                             <% control Children %> 
                                                <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
                                                    <% if Children %>

                                                        <ul>
                                                            <% control Children %>
                                                                <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
                                                                    <% if Children %>

                                                                        <ul>
                                                                            <% control Children %>
                                                                                <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
                                                                            <% end_control %>  
                                                                        </ul>

                                                                    <% end_if %>
                                                                    </li>   
                                                            <% end_control %>  
                                                        </ul>

                                                    <% end_if %> 
                                                    </li>
                                             <% end_control %> 
                                         </ul> 

                                     <% end_if %> 
                                  </li> 
                              <% end_control %> 
                          </ul>

                      <% end_if %>                 
                   </li>
                <% end_control %> 
            </ul>
            <div style="clear:both"></div>

<div style="clear:both"></div>      
</div>
Rob
  • 13,342
  • 26
  • 40
  • 60
Lucy MacGregor
  • 83
  • 1
  • 7
  • It would help a whole lot if you could post the HTML, or at least a skeletal version of it. – Pointy Mar 11 '16 at 01:38
  • @Pointy I added the nav code, thanks – Lucy MacGregor Mar 11 '16 at 01:43
  • 2
    CSS-only solution is impossible here - there are no children-based selectors in CSS. If you have jQuery [this solution](http://stackoverflow.com/a/2326571/3707125) is applicable for you, otherwise you will have to implement corresponding logic by yourself. Also consider that you can add some class/attribute to your `li` using server-side: `class="has-children"` (not sure if this is correct syntax though) and use css-selector: `a.has-children`. – user3707125 Mar 11 '16 at 02:16
  • Haven't a clue what that code is so many of us can't help you. You should always supply what language you are using or, preferably, the resulting output. Also, you need to learn how to format your code to make it easier to read. – Rob Mar 11 '16 at 04:24

1 Answers1

0

I'm afraid CSS won't be taking home a win on this one... It's impossible for CSS to traverse backwards (that is, a child element cannot affect it's parent).

It is however, possible for the server side to handle this... For each one of your li elements, add another <% if Children %> statement. Like so:

<li class="$LinkingMode" <% if Children %> class="has-child" <% end_if %>  >

Then your above mentioned css rule could be modified to target: li.has-child > a:before {...}

WillW
  • 165
  • 9