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

  • Author
    Posts
  • #1593390

    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.

    #1593683

    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.

    #1593692

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

    #1593696

    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: " -->";
    }
    #1593697

    Thanks. :)

    #1593699

    You are welcome.

The topic ‘How do I make Menu items that use content in them if they hold a nested list?’ is closed to new replies.