Master Menu Page

I have a menu list that I created. <nav> <ul class="sf-menu"> <li class="current"><a href="[login to view URL]">Home</a></li> <li> <a href="[login to view URL]">About Us</a> <ul> <li><a href="#">Providers</a></li> </ul> </li> <li> <a href="[login to view URL]">Services</a> <ul> <li><a href="#">Policies</a></li> <li><a href="#">Forms</a></li> <li><a href="#">Common Conditions Info</a></li> </ul> </li> <li> <a href="[login to view URL]">Contact Us</a> <ul> <li><a href="#">Directions</a></li> <li><a href="#">Working Hours</a></li> </ul> </li> <li><a href="[login to view URL]">Careers</a></li> </ul> </nav> But there are 7 pages or so that use the same navigation.. And if I add more pages then they will use the same navigation. Now here is the problem. If i add a new page then I have to go and update each of the 7+ pages individually. I want a master page designed so that if I update it 1 time there then the menu will change for all the different pages it is on. You have to write the code and show me how it works.