Pop out side category Showdata

CSS

<link rel="stylesheet" href="https://cdn.ekmsecure.com/font-awesome/latest/fa-safe.css">


#menu ul, #menu li {margin: 0; padding: 0; list-style: none;}
		#menu li {
			position: relative;
			z-index; 2;
			}

.navigation-item > a:after {
			content: "\f0da";
	    display: inline-block;
	    position: absolute;
	    top: 7px;
	    font-family: FontAwesome;
	    font-style: normal;
	    right: 10px;
		}
		.navigation-item > a:hover:after {
			text-decoration: underline;
			/* underline must be set and then reset to fix an IE bug */
		}
		.navigation-item > a:hover:after {
			text-decoration: none;
			/* underline must be set and then reset to fix an IE bug */
		}
		.navigation-item > a:last-child:after {
			content: " ";
			width: auto;
			padding-left: 0;
		}



		#menu li:hover .subnavigation-list {
			display: block;
		}
		.subnavigation-list {
			display: none;
			position: absolute;
			top: 0;
			left: 100%;
			z-index: 2;
			width: 200px;
			background-color: white;
			box-shadow: 2px 2px 5px rgba(0,0,0,.25);
			font-size: 12px;
		}
		


		****** Obviously use the correct ID and Class references and style accordingly *********


		****** You can just use the info within output_item if needs be ******
[ekm:showdata]
					tag_hide_toggle='yes';
					data='categories';
					location='0';
					cols='1';
					rows='100';
					editbuttons='YES';
					font_formatting='no';
				
					' Output Format
					header_title_text='Browse Categories';
					output_start='
					<div id="menu" class="box">
						<div class="box-header">
							[header_title_text]
						</div>
						<div class="box-cont">
							<ul>
					';
					output_row_start='';
					output_column_start='';
					output_item='
								<li class="navigation-item">
									{name}
										[name]
									{name}
									{ekm:subcategories}
										[ekm:nested_showdata]
											tag_hide_toggle="yes";
											data="categories";
											location="[id]";
											cols="1";
											rows="100";
											editbuttons="YES";
											font_formatting="no";
										
											' Output Format
											output_start="
											<ul class="subnavigation-list">
											";
											output_row_start="";
											output_column_start="";
											output_item="
												<li class="subnavigation-item">
													[nested_name]
												</li>
											";
											output_column_end="";
											output_row_end="";
											output_end="
											</ul>
											";										
										[/ekm:nested_showdata]
									{/ekm:subcategories}
								</li>
					';
					output_column_end='';
					output_row_end='';
					output_end='
							</ul>
						</div>
					</div>
					';
				
					' Element Replace 
					element_replace='null';
				
				[/ekm:showdata]