Need help? Check out our Support site, then


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

  1. michaelbishop852
    Member

    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 michaelbishop852.wordpress.com.

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

  3. michaelbishop852
    Member

    Erm... no, it wasn't. Sorry, but I'm looking for some CSS that I can incorporate into my current setup.

  4. 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: " -->";
    }
  5. michaelbishop852
    Member

    Thanks. :)

  6. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic