Setup the HTML for your menu like you normally would, using UL
, LI
and A
elements.
<ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a></li> <li><a href="/contact/">Contact</a></li> </ul>
Make sure to wrap the text in either an A
or a SPAN
element.
Wrap the entire UL
in a node (most commonly a NAV
element) and give that node an ID
.
<nav id="my-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav>
You can create a submenu by simply putting another UL
in a LI
.
<nav id="my-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a> <ul> <li><a href="/about/history/">History</a></li> <li><a href="/about/team/">The team</a></li> <li><a href="/about/address/">Our address</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </nav>
Next up:
Styling lists