Question

I recently began attempting to develop a simple WordPress theme for myself, and have since hit a wall with the navigation menu.

The drop down menu will have multiple items and multiple sub menus with the need to add more in the future. Example from the default WordPress theme – https://i.stack.imgur.com/HKJwX.png

I wanted to know what kind of CSS was behind the menu being able to dynamically add another item and sub menu with no limit.

Thanks

Answer 1

Try this:

CSS:

li ul {
  display: none;
}

ul li:hover  > ul{
  display: block;
}
​

HTML:

​<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>
        Item 3
        <ul>
            <li>Subitem 3.1</li>
            <li>Subitem 3.2</li>
            <li>
                Subitem 3.3
                <ul>
                    <li>Subitem 3.3.1</li>
                    <li>Subitem 3.3.2</li>
                    <li>Subitem 3.3.3</li>
                </ul>                    
            </li>
        </ul>
    </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

DEMO: http://jsfiddle.net/TKBdY/