multiple sub menus

Hello everyone

My website uses the “Twenty Twelve” template and despite my best efforts I am unable to get sub/sub menus working. To be specific I am trying to make a menu that looks like this;
TOPIC 1
TOPIC 2 -> Topic 2A
TOPIC 3 -> Topic 3A

I have arranged my pages in the dashboard and when I visit the website I can see ALL of the sub menus. However I can never click on the sub menus “Topic 2A” or “Topic 3A” as they disappear as soon as I try to move my mouse over them.

In the source of the page I see that the menu has the following elements/classes

<div id="access" role="navigation">
<div class="menu-header">
<ul class="menu">
<li class="menu-item .... >
<ul class="sub-menu">
	<li class="menu-item ....>

The portion of the .css file relating the menu is ....

#access {
	color: #7c7c7c;
	display: block;
	margin: 0 auto;
}
#access .menu-header,
div.menu {
	margin-left: 12px;
	font-size:16px;
	text-transform:uppercase;
	position:relative;
	bottom:0px;
	list-style: none;
	z-index:9999;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	float: right;

}

#access .menu-header > ul,
div.menu > ul {
	list-style: none;
	float: right;
	margin: 93px 0 0 0;
	z-index:999;
	position: relative;
}

#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {
	color: #7c7c7c;
	display: block;
	line-height: 21px;
	padding: 0 14px;
	text-decoration: none;
	font-size:18px;
	font-weight: 300;
}
#access ul ul {
	display: none;
	position: absolute;
	left: 0;
	float: left;
	width: 160px;
	z-index: 99999;
	border-bottom:8px solid #adafb3;
	left:-24px;
	padding-top:9px;
}
#access ul ul li {
	min-width: 150px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	line-height: 1em;
	padding: 4px 0px 5px 10px;
	width: 150px;
	height: auto;
	background:#fff;
	opacity:0.9;
	font-size:16px;
	z-index:9999;
}
#access li:hover > a,
#access ul ul :hover > a {
	color: #b3d670;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #b3d670;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #b3d670;
}

#access .menu-header li, div.menu li {border-left:1px solid #dfe0e1;}
#access .menu-header li:first-child, div.menu {border:none ! important;}

[Please use the code buttons when posting code here]

——————————————–
Can anyone tell me what edits I need to make to the .css file so that I can click on my nested sub-menus?

Any and all help would be appreciated.

Thanks in advance.