How do I best reuse html code for menus

Question

I'm making a larger website using HTML, css, JSP and Java-servlet.

I've made a menu using < nav> < ul> < li> (navigation). When i hover, sub-menus drop-down. It looks like this:

I want to reuse this menu on all my pages. It will change a lot so I need Single Source of Truth - No duplication of code. I've been looking in to php/js but haven't been able to get it to work.

I imaging that it will work like this:

• File only containing the HTML-code (like my menu) that are reused on all pages.
• File that make the magic work.
• Few lines of code that gets added to each page, at the place the menu should be. (maybe a line to tell what script it runs)

Notes:

• I'd like this to work for most (if not all) web-browsers.
• The drop-down menu should go over text below.

Answer 1

use the include feature given by jsp:

<%@ include file="menu.html" %>

Answer 2

You can also try using the Tiles framework . Look here for more info