CSS13---reprint---only use CSS to achieve multi-level menu, drop-down menu

It is often used in our lives to sort out a series of instructions, to simplify complex procedures and to make the interface look more friendly. The more complex the application, the more functions it will usually use to organize the commands into a single sub-menu.

General web frequently see the two-level menu, using CSS to achieve, some will add more effects through JavaScript, such as animation, delay and so on. Multiple-level options often use JavaScript to make simple, multi-level selections, even through CSS.

# # #HTML

123456789101112131415161718192021

<nav> <ul> <li><a href="" > Option 1</a></li> <li> <a href="" > option 2</a> <ul> <li> <a href="" > 2-1</a> <ul> <li><a href="" > 2-1-1</a> </li> <li><a href="" > 2-1-2</a> </li> </ul> </li> <li><a href="" > 2-2</a> </li> <li><a href="" > 2-3</a> </li> </ul> </li> <li><a href="" > Option 3</a></li> <li><a href="" > Option 4</a></li> </ul> </nav>

On the HTML tab, all of the items are clickable links, and the theory is unlimited.

# # #CSS

123456789101112131415161718192021222324252627

ul li { position:relative; / * Make the sub-list display according to the coordinates of the parent menu * /}/ * The connection of the Set parent menu * /ul Li a{ background: URL (detail.png); }/ * When there are no sub-options under the parent menu, which means there is only one link, hide detail.png * /ul Li a: only-child{ Background:none;}ul li: hover > ul { Display:block; / * Mouse slides into the parent selection and shows the sub-menu * /}/ * The two-level selection is shown directly below the first level of the menu * /UL ul { Position:absolute;top: 100%; List-style:none;Display:none;}/ * Three-level options are shown on the right of the second- class menu */UL ul ul { Position:absolute;Left : 100%; top: 0; }

This completes all the steps, not the need for complicated JavaScript, is not very simple?

CSS13---reprint---only use CSS to achieve multi-level menu, drop-down menu