Nesting and Navigation

Nesting and Navigation

Simply put, nesting is placing a div within another div. One of the many uses of nesting is in creating navigation systems. Nesting particular elements and targeting those elements specifically allows the developer to have complete control over how the individual elements are displayed. This is particularly useful when setting up sub menus.

Our goal will be to create a submenu that only appears when its parent element is hovered.

[dropcaps type=”circle” color=”#ffffff” background=”#7a1010″]1[/dropcaps]

In the example below we have an unordered list nested within another unordered list, which is targeted with the class “menu”.



[dropcaps type=”circle” color=”#ffffff” background=”#7a1010″]2[/dropcaps]There are various ways to make the second level navigation appear and disappear. In this particular technique we use the “opacity” element.

Nesting 2


It’s quite simple really: we set the submenu’s opacity to “0”. Then we set the submenu’s hover state to “1”. This means that the submenu stays hidden until we hover over it, and then it appears. Click the “live demo” button below to see it in action.

View Source Code

[accordion style=”modern” open=”no”][accordion_toggle title=”View CSS”]
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;

.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;

.menu ul li:last-child a { border: none; }
[/accordion_toggle][/accordion] [accordion style=”modern” open=”no”][accordion_toggle title=”View HTML”] [/accordion_toggle][/accordion] [button color=”#ffffff” style=”2″ size=”regular” icon=”icon-desktop” icon_upload=”” target=”_blank” url=”http://innovatewebdevelopment.com/demos/nesting.html”]Live Demo[/button]

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Name (required)
Email (required)