gtdeng / dropdownmenu Goto Github PK

This is a simple dropDownMenu utilizing JS, DOM and CSS.

Using Javascript, CSS, DOM, and the initial template file index.html; please create a dropdown menu similar to the one pictured in dropdown.png

When opening index.html in Chrome or Firefox, the page should initially show the menu colored pink with items Item 1, Item 2, and Item 3.

When the mouse is hovered over Item 3, a sub menu should show up with items Sub 1, Sub 2, and Sub 3. The sub menu should have background color violet.

When the mouse is hover over item Sub 3, another sub menu should show up with items SubSub 1, SubSub 2, and SubSub 3. This inner sub menu should have light green background color.

When the user clicks on any menu item, whether it be Item #, Sub #, or SubSub #, then a javascript alert box should appear with the content of that alert window being the name of the menu item (ie: "Item 1", "Sub 2", "SubSub 2", etc)

You may use the JSON structure in the index.html document or create your own, as long as the dropdown menu meets the requirements.

CSS requirements:

• Every menu item should have width 200px, height 70px.
• Every menu item should have a solid 1 pixel black border.
• All text must be vertically aligned in the middle and horizontally aligned in the middle.