Add Child Menu to Zoe-Tech Theme

a_instructions.txt

CSS Changes

- remove #navigation .child-menu from line 13 of custom.css
- display child-menu on hover

&:hover {
			.arrow-up {
				display: block;
			}

			ul.child-menu {
				display: inline-block;
			}
		}

- style child menu

		&.child-menu {
			background: url(../images/custom/background.png);
			@include border-radius(5px);
			border: 1px solid;
			display: none;
			margin: 0 auto;
			right: -50%;
			padding: 5px 3px;
			position: absolute;
			width: 150px;
			z-index: 5;

			a {
				font-weight: normal;
			}
		}



- style arrow

	.arrow-up {
		display: none;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid black;
		padding-top: 10px;
	}


Template Changes

- navigation.vm added "<div class="arrow-up"></div>" above child-menu to display the arrow

custom.css

@import "compass";

/* -------- Set Compass Defaults -------- */

$default-box-shadow-blur-offset: 6px;
$default-box-shadow-color: #999;
$default-box-shadow-h-offset: 0;
$default-box-shadow-spread: 1px;
$default-box-shadow-v-offset: 1px;

/* -------- Global -------- */

#breadcrumbs, #heading .page-title, #navigation h1, #skip-to-content, .portlet-journal-content-search .lfr-search-button, .portlet-journal-content-search .lfr-search-keywords {
	clip: rect(0 0 0 0);
	position: absolute;
}

body {
	background: url(../images/custom/background.png) 0 0;
	border-top: 10px solid #142933;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

	&.html-editor {
		background: #FFF;
	}

	&.portal-popup {
		background-image: none;
		border-top-width: 0;

		#content #main-content {
			margin-top: 0;
		}
	}

	&.show-footer {
		background: #142933;

		&.aui-dialog-iframe-popup {
			background: #FFF;
		}

		#wrapper {
			background: url(../images/custom/background.png) 0 0;
		}
	}
}

#wrapper {
	position: relative;
}

#banner, #content {
	margin: 0 auto;
	width: 960px;
}

#banner {
	position: relative;
}

#sign-in {
	background: #142933;
	color: #FFF;
	display: block;
	font-size: 1em;
	font-weight: bold;
	padding: 0 15px 5px;
	position: absolute;
	right: 0;
	text-decoration: none;
	text-transform: uppsercase;
	top: 0;

	&:hover {
		color: #EE9F44;
	}
}

ul.hide-bullets {
	list-style: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

img {
	border-width: 0;

	&.right {
		margin: 18px 0 18px 18px;
	}

	&.left {
		margin: 18px 18px 18px 0;
	}

	&.main-content-image {
		height: 320px;
		margin-bottom: 1em;
		width: 673px;
	}
}

hr {
	background: #DDD;
	border-width: 0;
	clear: both;
	float: none;
	height: 1px;
	margin: 0 0 1.45em;
	width: 100%;
}

/* -------- Global-Layout -------- */

.columns-1-3-1 {
	.aui-w33, #column-2, #column-3, #column-4 {
		width: 305px;
	}

	#layout-column_column-2 {
		margin-right: 10px;
	}

	#layout-column_column-3 {
		margin: 0 10px;
		padding: 0;
	}

	#layout-column_column-4 {
		margin-left: 10px;
		padding: 0;
	}
}

.columns-2 {
	#column-1 #layout-column_column-1 {
		margin-right: 10px;
		padding: 0;
	}

	#column-2 #layout-column_column-2 {
		margin-left: 10px;
		padding: 0;
	}
}

/* -------- Heading -------- */

#heading {
	position: relative;

	.site-title {
		margin-top: 0;
		padding-top: 2em;

		#pageSearch {
			position: absolute;
			right: 0;
			top: 42px;
		}
	}
}

#banner .site-name {
	background-color: #132832;
	color: #FFF;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 200;
	margin: 0 10px;
	padding: 7px 17px;
	position: relative;

	#heading {
		padding: 20px 0 10px;

		h1.company-title {
			clear: both;
			float: left;
			margin: 0;
		}
	}
}

/* -------- Search Bar -------- */

#pageSearch {
		background-image: url(../images/custom/page_search.png);
		background-repeat: no-repeat;

	#keywords {
		background-image: none;
		background-color: transparent;
		border-width: 0;
		color: #9A9A9A;
		font-size: 12px;
		height: 14px;
		padding: 10px 0 10px 10px;
		width: 170px
	}

	.lfr-search-keywords {
		height: 36px;
		margin-right: -10px;
		margin-top: 3px;
		text-transform: uppercase;

		.aui-field-content {
			margin-right: 0;
			padding-right: 0;
		}
	}

	.lfr-search-button .aui-field-content {
		margin-right: 12px;
	}

	#search {
		margin-left: 3px;
		padding: 6px 0 6px 12px;
	}
}

/* -------- Navigation -------- */

#navigation {
	background: url(../images/custom/nav_bg.png) repeat-x 0 10px;
	clear: both;
	display: block;
	height: 70px;

	a {
		&:link, &:visited {
			color: #707070;
			font-size: 1em;
			text-decoration: none;
			text-transform: capitalize;
		}

		&:hover {
			color: #252525;
		}
	}

	li {
		float: left;
		padding: 0 20px;

		&.first {
			padding-left: 5px;
		}

		&.last {
			padding-right: 5px;
		}

		&.selected a {
			color: #252525;
			font-weight: 700;
		}

		&:hover {
			.arrow-up {
				display: block;
			}

			ul.child-menu {
				display: inline-block;
			}
		}
	}

	ul {
		display: inline-block;
		list-style: none;
		margin: 10px 0;
		padding: 19px 0 23px 5px;

		&.child-menu {
			background: url(../images/custom/background.png);
			@include border-radius(5px);
			border: 1px solid;
			display: none;
			margin: 0 auto;
			right: -50%;
			padding: 5px 3px;
			position: absolute;
			width: 150px;
			z-index: 5;

			a {
				font-weight: normal;
			}
		}
	}

	.arrow-up {
		display: none;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid black;
		padding-top: 10px;
	}
}

#content #main-content {
	margin-top: 20px;
	min-height: 200px;
	padding-bottom: 20px;
}

/* -------- Carousel ------- */

.carousel-container {
	background: #1D1D1B;
	margin-bottom: 20px;

	#carousel {
		margin-left: 287px;

		.aui-carousel-item {
			text-indent: -99999px;
		}
	}

	#tabs {
		display: inline-block;
		float: left;
		left: 0;
		list-style: none;
		margin: 0;
		position: absolute;
		top: 0;
		width: 287px;
		z-index: 4;

		.tab-item {
			background-color: none;
			color: #C2C2C2;
			cursor: pointer;
			height: 30px;
			line-height: 1.5;
			margin: 0 5px;
			padding: 20px 0 20px 15px;
			position: relative;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
			width: 277px;
			z-index: 2;

			&.first {
				margin-top: 5px;
			}

			&.last {
				margin-bottom: 5px;
			}

			.aui-carousel-menu-index .aui-carousel-menu-active {
				color: #EBEBEB;
			}

			.icon {
				float: left;
				margin: 4px 15px 0 0;
			}

			h4 {
				margin: 0;
				padding: 0;
				text-transform: uppercase;
			}
		}

		.divider {
			background: url(../images/custom/separator.png) repeat-x 0 0;
			display: block;
			height: 2px;
			margin: 5px 10px 3px;
			width: 268px;
		}
	}
}

.aui-carousel-menu-active {
	background: url(../images/custom/tabwarrow.png) no-repeat 0 0;
	color: #C2C2C2;
}

/* -------- Pod -------- */

.pod {
	width: 305px;

	h5 {
		color: #252525;
		font-size: 20px;
		font-weight: 400;
		margin: 0 0 6px;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	}

	.pod-image {
		margin-top: 25px;
	}

	.pod-text {
		color: #7D7D7D;
		font-size: 14px;
	}
}

.column-text {
	width: 305px;

	.more {
		color: #C58E4C;
		margin: 10px 0;
	}

	p {
		font-size: 12px;
		line-height: 15px;
		margin: 15px 0;
		text-indent: 0;
	}

	img {
		height: 167px;
		margin-bottom: 1em;
		margin-top: 25px;
		width: 305px;
	}
}

/* -------- Quote Box ------- */

#quoteBox {
	padding-top: 15px;

	h3 {
		color: #707070;
		font-size: 1.33em;
		font-weight: 200;
		text-align: center;
		text-transform: uppercase;
	}

	#quoteBoxContainer {
		background: #D4D1CE;
		background: rgba(0, 0, 0, 0.10);
		border-bottom: 2px solid #E2E0DE;
		border-top: 2px solid #E2E0DE;
	}

	.quote-item {
		border: solid #FFF;
		border-width: 2px 0;
		display: none;
		padding: 75px 155px;

		.quote {
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size: 36px;
			font-style: italic;
			line-height: 35px;
			text-align: left;

			span {
				background: url(../images/custom/quotemarks.png) 0 0 no-repeat;
				clear: both;
				display: inline-block;
				height: 32px;
				text-indent: -9999px;
				width: 15px;

				&.last {
					background-position: 0 -43px;
				}
			}
		}

		.author {
			color: #636363;
			font-size: 14px;
			margin-top: 26px;
		}
	}

	.quote-item-0 {
		display: block;
	}
}

/* -------- Side Bar -------- */

.list-block {
	.title {
		margin-top: 0;
	}
}

ul.arrow {
	list-style: none;
	margin: 15px;
	list-style-image:url(../images/custom/bullet.png);

	li {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
	}
}

.sidebar {
	h4 {
		font-size: 20px;
		font-weight: 700;
		margin-bottom: 33px;
	}

	h6 {
		color: #7D7D7D;
		font-size: 14px;
		font-weight: 400;
	}
}

/* -------- Footer -------- */

#footerWrapper {
	background-color: #142933;

	#footerContent {
		margin: 0 auto;
		padding: 25px 0;
		width: 960px;
	}
}

#footerContent {
	h4, p {
		color: #959595;
		font-size: 1em;
	}

	.aui-column-content {
		display: inline-block;
		width: 100%;
	}

	a {
		color: #EE9F44;
		text-decoration: none;
	}

	h2 {
		color: #FFF;
		font-size: 1.5em;
		font-weight: 400;
		margin: 15px 0;
	}

	h4 {
		margin-bottom: 1.7em;
	}

	p {
		line-height: 1.5;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			padding: 5px 0;

			a {
				text-transform: capitalize;
			}
		}

		&.social {
			display: inline-block;
			padding: 0;

			li {
				float: left;
				height: 32px;
				margin-bottom: 25px;
				padding: 0 25px 0 0;
				width: 32px;

				span {
					display: block;
					text-indent: -9999px;
				}
			}
		}
	}
}

/* ------- Browser Specific Rules ------ */

.ie6 {
	.aui-carousel-menu-active {
		background-image: url(../images/custom/tab.png);
	}
}

.ie6, .ie7 {
	.carousel-container #tabs .divider {
		background: none;
	}
}

/* -------- Extras -------- */

#banner .site-name {
	@include background(linear-gradient(top left, #132832, #193340));
	@include box-shadow(inset 0 0 5px rgba(0, 0, 0, 0.8), 1px 1px 1px white);
	@include text-shadow(1px 1px rgba(0, 0, 0, 0.5));
}

#sign-in {
	@include border-bottom-radius(3px);
	@include box-shadow(1px 2px 3px 0px #999);
}

.carousel-container #carousel .aui-carousel-item {
	@include border-right-radius(5px);
}

#banner .site-name, .carousel-container, .carousel-container #tabs .tab-item {
	@include border-radius(5px);
}

.carousel-container, .column-text img, .pod .pod-image {
	@include single-box-shadow;
}

#quoteBox h3 {
	@include text-shadow(1px 1px rgba(255, 255, 255, 1));
}

navigation.vm

<nav class="$nav_css_class" id="navigation">
	<h1>
		<span>#language("navigation")</span>
	</h1>

	<ul>
		#foreach ($nav_item in $nav_items)
			#if ($nav_item.isSelected())
				<li class="selected">
			#else
				<li>
			#end
				<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<div class="arrow-up"></div>
					<ul class="child-menu">
						#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
								<li class="selected">
							#else
								<li>
							#end
								<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
		#end
	</ul>
</nav>