How do I make Menu items that use content in them if they hold a nested list?

michaelbishop852 · Member · Jan 9, 2014 at 12:08 am
Copy link

Add topic to favorites
Example (Item 1 is a normal item, while Item 2 holds a list within it):
<ul><li>Item 1</li><li>Item 2<ul><li>Item 2.1</li><li>Item 2.2</li></ul></li></ul>
would make
- Item 1
- Item 2 ->
  
  Item 2.1
  
  Item 2.2
where “->” is content inserted via :after.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 13, 2014 at 5:04 pm
Copy link
Hi there, take a look at the submenu section of Custom Menus to see if that is what you are wanting to accomplish. You can then insert a Custom Menu Widget in the sidebar and select your custom menu you created from the dropdown and it will be formatted similarly to what you show above.
michaelbishop852 · Member · Jan 13, 2014 at 11:58 pm
Copy link
Erm… no, it wasn’t. Sorry, but I’m looking for some CSS that I can incorporate into my current setup.
thesacredpath · Member · Jan 14, 2014 at 4:00 am
Copy link
Ah, ok. This is one way to do it. Wrap Item 2 in a span and assign a class to the span as below.
```
<ul>
	<li>item 1</li>
	<li><span class="my-arrow">item 2</span>
<ul>
	<li>item 2.1</li>
	<li>item 2.2</li>
</ul>
</li>
</ul>
```
This would be the CSS for “my-arrow”
```
span.my-arrow:after {
    content: " -->";
}
```
michaelbishop852 · Member · Jan 14, 2014 at 5:04 am
Copy link
Thanks. :)
thesacredpath · Member · Jan 14, 2014 at 3:05 pm
Copy link
You are welcome.

No items found.