Support » Themes and Templates » multiple sub menus

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;
    	list-style: none;
    #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;
    	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-weight: 300;
    #access ul ul {
    	display: none;
    	position: absolute;
    	left: 0;
    	float: left;
    	width: 160px;
    	z-index: 99999;
    	border-bottom:8px solid #adafb3;
    #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;
    #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.

  • The topic ‘multiple sub menus’ is closed to new replies.