Visually positioning a nested list behind it's parent list

Hi, I’m fairly certain this isn’t possible but I thought it’d be worth asking.

Is it possible to visually position a nested <ul> behind it’s parent?

Basically I’m animating the subnav from behind it’s parent. The same as on this site (hover over ‘About Us’ in the main nav).

Any suggestions are welcome.

Thanks

Someone replied but it’s not appearing for some reason. Turned out a negative z-index works just fine!

I posted that but then deleted it, as I realized it wasn’t working properly. With the negative z-index, you can’t actually hover over the flyout menu. I tried a few things to solve that, but haven’t got it yet. You can change the z-index on hover, but then it slides over the main menu instead of underneath. If you got it to work, please post your solution! Here’s what I posted, in case anyone can improve on it (I’m sure there’s a way, I’m just no ace with CSS!:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Peep out menu</title>
	
<style media="all">
ul {list-style: none; margin: 0; padding: 0; width: 200px;}
.menu {position: relative;  background: #222;}
a {text-decoration: none; line-height: 1.75em; padding-left:10px; display: block;}
.menu li a {color: #eee;}
.menu li a:hover, .menu li a:focus {color: white;}
.menu li ul li a {color: #333;}
.menu li ul li a:hover {color: black;}
.menu ul {background: #ccc; position: absolute; right: 0; top: 0; z-index: -1}
.menu li:hover ul {right: -200px; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -o-transition: all linear .3s; -ms-transition: all linear .3s; transition: all .3s;}

</style>
	
</head>
<body>

<ul class="menu">
	<li><a href="">Link 1</a>
		<ul class="menu">
			<li><a href="">Link 5</a></li>
			<li><a href="">Link 6</a></li>
			<li><a href="">Link 7</a></li>
			<li><a href="">Link 8</a></li>
		</ul>
	</li>
	<li><a href="">Link 2</a>
		<ul class="menu">
			<li><a href="">Link 9</a></li>
			<li><a href="">Link 10</a></li>
			<li><a href="">Link 11</a></li>
			<li><a href="">Link 12</a></li>
		</ul>
	</li>
	<li><a href="">Link 3</a>
		<ul class="menu">
			<li><a href="">Link 13</a></li>
			<li><a href="">Link 14</a></li>
			<li><a href="">Link 15</a></li>
			<li><a href="">Link 16</a></li>
		</ul>
	</li>
	<li><a href="">Link 4</a>
		<ul class="menu">
			<li><a href="">Link 17</a></li>
			<li><a href="">Link 18</a></li>
			<li><a href="">Link 19</a></li>
			<li><a href="">Link 20</a></li>
		</ul>
	</li>
</ul>

</body>
</html>

I’ve got it working :slight_smile: not sure what I changed but I will update this post with my working version after work.

Thanks!

Great, look forward to it. :slight_smile:

Not quite sure what I did to get it working but here is my code.

Here is a working example - http://jsfiddle.net/WTjHn/


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Peep out menu</title>
	
<style media="all">
body {
	font-family: arial;
}
nav {
  background: #ccc;
  font-size: 1.07692em;
  font-weight: 600;
  margin-bottom: 1.483%;
  text-transform: uppercase;
  position: relative;
  width: 20%;
  z-index: 10;
}
nav > ul {
  background: #aaa;
  z-index: 10;
  padding: 10% 0;
  list-style: none;
}
nav li.current a {
  color: #e8872a;
}
nav li:hover > ul {
  left: 100%;
}
nav li:hover > a {
  color: #0fc;
}
nav a {
  color: #000;
  padding: 0 10%;
  display: block;
  text-decoration: none;
}

nav .sub_nav {
  -webkit-transition: all ease-in-out;
  -webkit-transition-delay: 300ms;
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
	list-style: none;
  display: block;
  position: absolute;
  padding: 10% 0;
  top: 0;
  left: -2%;
  width: 98%;
  height: 100%;
  margin-left: 2%;
  z-index: -30;
}

nav .sub_nav a {
  cursor: pointer;
}

</style>
	
</head>
<body>
<nav>
<ul>
	<li><a href="">Link 1</a>
		<ul class="sub_nav">
			<li><a href="">Link 5</a></li>
			<li><a href="">Link 6</a></li>
			<li><a href="">Link 7</a></li>
			<li><a href="">Link 8</a></li>
		</ul>
	</li>
	<li><a href="">Link 2</a>
		<ul class="sub_nav">
			<li><a href="">Link 9</a></li>
			<li><a href="">Link 10</a></li>
			<li><a href="">Link 11</a></li>
			<li><a href="">Link 12</a></li>
		</ul>
	</li>
	<li><a href="">Link 3</a>
		<ul class="sub_nav">
			<li><a href="">Link 13</a></li>
			<li><a href="">Link 14</a></li>
			<li><a href="">Link 15</a></li>
			<li><a href="">Link 16</a></li>
		</ul>
	</li>
	<li><a href="">Link 4</a>
		<ul class="sub_nav">
			<li><a href="">Link 17</a></li>
			<li><a href="">Link 18</a></li>
			<li><a href="">Link 19</a></li>
			<li><a href="">Link 20</a></li>
		</ul>
	</li>
</ul>
</nav>
</body>
</html>

Hehe, thanks for posting that. Nice work. It does seem to require an extra element around it to set the positioning context, which is a bit of a shame, but pretty easy to live with, all the same. Here’s my final version (though it’s nice the way you give it a flexible width):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Peep out menu</title>
	
<style media="all">
.wrap {position: relative; width: 200px; z-index: 10;}
ul {list-style: none; margin: 0; padding: 0; }
.menu {width: 200px; background: #222;}
a {color: white; text-decoration: none; line-height: 1.75em; padding-left: 10px; display: block;}
.menu li a {width: 190px;}
.menu li a:hover, .menu li a:focus, .menu li:hover {background: red;}
.menu ul {background: #30353b; position: absolute; left: 0; top: 0; z-index: -1; width: 200px; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -o-transition: all linear .3s; -ms-transition: all linear .3s; transition: all .3s;}
.menu li:hover ul {left: 100%;}

</style>
	
</head>
<body>
<div class="wrap">
	<ul class="menu">
		<li><a href="">Link 1</a>
			<ul>
				<li><a href="">Link 5</a></li>
				<li><a href="">Link 6</a></li>
				<li><a href="">Link 7</a></li>
				<li><a href="">Link 8</a></li>
			</ul>
		</li>
		<li><a href="">Link 2</a>
			<ul>
				<li><a href="">Link 9</a></li>
				<li><a href="">Link 10</a></li>
				<li><a href="">Link 11</a></li>
				<li><a href="">Link 12</a></li>
			</ul>
		</li>
		<li><a href="">Link 3</a>
			<ul>
				<li><a href="">Link 13</a></li>
				<li><a href="">Link 14</a></li>
				<li><a href="">Link 15</a></li>
				<li><a href="">Link 16</a></li>
			</ul>
		</li>
		<li><a href="">Link 4</a>
			<ul>
				<li><a href="">Link 17</a></li>
				<li><a href="">Link 18</a></li>
				<li><a href="">Link 19</a></li>
				<li><a href="">Link 20</a></li>
			</ul>
		</li>
	</ul>
</div>

</body>
</html>

Here’s also a (kind of lame) attempt to make it keyboard accessible:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Peep out menu</title>
	
<style media="all">
.wrap {position: relative; width: 200px; z-index: 10;}
ul {list-style: none; margin: 0; padding: 0; }
.menu {width: 200px; background: #222;}
a {color: white; text-decoration: none; line-height: 1.75em; padding-left: 10px; display: block;}
.menu li a {width: 190px;}
.menu li a:hover, .menu li a:focus, .menu li:hover {background: red;}
.menu ul {background: #30353b; position: absolute; left: 0; top: 0; z-index: -1; width: 200px; 
	/*-webkit-transition: all linear .3s; -moz-transition: all linear .3s; -o-transition: all linear .3s; -ms-transition: all linear .3s; transition: all .3s;*/}
.menu li:hover ul {left: 100%;}

.menu li a:focus + ul, .menu ul li a:focus {left: 100%; position: absolute;}

</style>
	
</head>
<body>
<div class="wrap">
	<ul class="menu">
		<li><a href="">Link 1</a>
			<ul>
				<li><a href="">Link 5</a></li>
				<li><a href="">Link 6</a></li>
				<li><a href="">Link 7</a></li>
				<li><a href="">Link 8</a></li>
			</ul>
		</li>
		<li><a href="">Link 2</a>
			<ul>
				<li><a href="">Link 9</a></li>
				<li><a href="">Link 10</a></li>
				<li><a href="">Link 11</a></li>
				<li><a href="">Link 12</a></li>
			</ul>
		</li>
		<li><a href="">Link 3</a>
			<ul>
				<li><a href="">Link 13</a></li>
				<li><a href="">Link 14</a></li>
				<li><a href="">Link 15</a></li>
				<li><a href="">Link 16</a></li>
			</ul>
		</li>
		<li><a href="">Link 4</a>
			<ul>
				<li><a href="">Link 17</a></li>
				<li><a href="">Link 18</a></li>
				<li><a href="">Link 19</a></li>
				<li><a href="">Link 20</a></li>
			</ul>
		</li>
	</ul>
</div>

</body>
</html>

I turned off the slide effect here, as it is a bit offputting when tabbing.

Ah of course, the extra element isn’t needed. Just what I had in my version. What did you change on yours to make it work then. I originally tried amending yours but couldn’t figure out what was needed!

Oh, it does seem to be needed. That’s the main difference between yours and my original. I just added the outer wrap div (equivalent to your <nav>), set it as the positioning context (instead of the top level UL), and it worked.

Ah, sorry yes. I wasn’t thinking!