+ Start a Discussion
Suman Saha 47Suman Saha 47 

Child menu under a tab

How do we create a child menu under a tab using salesforce?
Amit Chaudhary 8Amit Chaudhary 8
Please try below code.

Example 1:-
<!-- Page: -->
<apex:page id="thePage">
    <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
    <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
    <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
    </apex:tabPanel>
</apex:page>

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_tab.htm

Example 2:-  Please check below post.
http://amitsalesforce.blogspot.in/2014/11/dynamic-tab-in-salesforce-css-and.html

Please let us k now if this will help u

Thanks
Amit Chaudhary
ManojjenaManojjena
Hi Sunam,
I think you are expecting some thing like below code behaves ,howerver you need to shoe some thing on click on submenu .

Copy below code to your dev org and let me know if it helps .
 
<apex:page id="thePage">
	<div id="nav">
		<div class="menu" id="menu_1">Menu
			<div class="sub_menu">
				<ul>
					<li><a href="">Sub Menu Item 1</a></li>
					<li><a href="">Sub Menu Item 2</a></li>
					<li><a href="">Sub Menu Item 3</a></li>
				</ul>
			</div>
		</div>

		<div class="menu" id="menu_2">Menu 2
			<div class="sub_menu">
				<ul>
					<li><a href="">Sub Menu Item A</a></li>
					<li><a href="">Sub Menu Item B</a></li>
					<li><a href="">Sub Menu Item C</a></li>
				</ul>
			</div>
		</div>
		<div class="menu" id="menu_3">Menu 3
			<div class="sub_menu">
				<ul>
					<li><a href="">Sub Menu Item X</a></li>
					<li><a href="">Sub Menu Item Y</a></li>
					<li><a href="">Sub Menu Item Z</a></li>
				</ul>
			</div>
		</div>
	</div>
	<style>
		body, html{
				padding:10px 10px;
			}
			#nav{
				position:relative;
				height:30px;
				width:770px;
				cursor:default;
			}
			.menu{
				position:relative;
				font-size:120%;
				font-weight:bold;
				background:#CCC000;
				height:50px;
				width:150px;
				float:left;
				text-align:center;
				border:1px solid #000000;
				line-height:2.2;
			}
			.sub_menu{
				position:absolute;
				background:orange;
				height:110px;
				width:250px;
				border:1px solid #000000;
				top:52px;
				left:0px;
				display:none;
			}
			a{
				text-decoration:none;
				color: #000000;
			}
			ul{
				list-style:none;
				padding:5px 10px;
			}
			li{
				padding:2px 10px;
			}

		.menu:hover .sub_menu{
			display:block;
		}
	</style>
</apex:page>

Thanks 
Manoj