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>
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>
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.