Display Dropdown Items

HI folks,

Working on the following site: https://tinyurl.com/m76mmy8 and I’m having problems getting sub menu items to display. I have a sub menu item set under the “About Us” menu item, but no dice.

Here is current CSS:

#top-menu { width:100%; float:left; margin:0px; padding:0px; height:52px; position:relative; z-index:999; }

	ul.menu { float:left; margin:0px; padding:0px; width:100%; }
	ul.menu li { float:left; display:inline; margin:0px; padding:0px; height:52px; position:relative; }
	ul.menu li a { text-shadow:none; float:left; font-size:14px; line-height:52px; text-transform:uppercase; padding:0px 27px; position:relative; z-index:1; transition:none; -moz-transition:none; -o-transition:none; -webkit-transition:none; }
	ul.menu li.home a { width:31px; height:31px; margin:0px; padding:11px 15px 10px; font-size:0; text-align:center; }
	ul.menu li:last-child { border:none; }

	ul.menu li.home li a { text-align:left; }

	ul.menu li .hoverL, ul.menu li .hoverR {  opacity:0; filter:alpha(opacity=0); bottom:0; left:0; position:absolute; right:0; top:0; }
	ul.menu li.current_page_item .hoverL, ul.menu li.current_page_item .hoverR, ul.menu li:hover .hoverL, ul.menu li:hover .hoverR { -webkit-transition: opacity 0.5s; -moz-transition:opacity 0.5s; -o-transition:opacity 0.5s;  opacity:1; filter:alpha(opacity=100); }

	ul.menu li ul { display:none; position:absolute; z-index:100; top:52px; left:0px; width:200px; padding:0px; margin:0px; }
	ul.menu li ul li, ul.menu li.home ul li { height:auto; border-right:0px; clear:both; width:100%; }
	ul.menu li ul li a, ul.menu li.home ul li a { font-size:12px; line-height:normal; line-height:20px; padding:10px 15px 9px; width:170px; }

	ul.menu li.home ul li a { background:none; height:auto; }

	ul.menu li ul li.current_page_item, ul.menu li ul li:hover { behavior:url(PIE.htc); }

	ul.menu li ul ul { left:200px; top:-2px; }

Any thoughts? I’m horrible with CSS menus, so anything would be helpful.