$2.$ Use your code editor to open the project$12-01\_$txt$.$html and project$12-01\_$txt$.$js files from the js$12$ c project$01$ folder. Enter your name and the date in the comment section of each file and save them as project$12-01.$html and project$12-01.$js$,$ respectively.

$3.$ Go to the project$12-01.$html file in your code editor. Add a script element to load the latest minified build of the jQuery library from the CDN on the jQuery website. Add another script element loading the contents of the project$12-01.$js file. Take some time to study the contents and structure of the document and then close the file, saving your changes.

$4.$ Go to the project$12-01.$js file in your code editor. Below the comment section insert jQuery code that runs an anonymous function when the page is loaded and ready. Within the anonymous function do the tasks described in Steps $5$ and $6.$

$5.$ Create a jQuery selector for the li$.$submenu element. Attach the mouseover$()$ method to the selector that runs an anonymous function. Within the anonymous function apply the show$()$ method to $$($e$.$currentTarget$).$children$("$ul$")$ selector to show the contents of the dropdown menu during the mouseover event.

$6.$ Chain the mouseout$()$ method to the li$.$submenu selector. Within the anonymous function apply the hide$()$ method to $$($e$.$currentTarget$).$children$("$ul$")$ selector to hide the contents of the dropdown menu during the mouseout event.

$7.$ Save your changes to the file and then open the project$12-01.$html file in your browser.

$8.$ Verify that when you move the mouse pointer over any of the three menu headings, a submenu appears below the heading and that when you move the pointer off, the submenu disappears.