<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
nav {
position: relative;
}
nav .preview {
display: none;
position: absolute;
top: 0;
left: 400px;
width: 300px;
height: 300px;
background: #9C9;
}
nav ul, nav li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
nav .menu a {
display: block;
}
nav .menu li > a {
width: 200px;
background: #CFC;
}
nav .menu li:hover > a {
background: #FFC;
}
nav .menu > li {
zoom: 1;
}
nav .menu > li:after {
display: block;
overflow: hidden;
clear: both;
height: 0;
content: ".";
}
nav .menu > li > a {
float: left;
}
nav .sub-menu {
display: none;
float: left;
height: 0;
}
nav .menu > li:hover .sub-menu {
display: block;
}
nav .sub-menu > li:hover .preview {
display: block;
}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="#">menu item 1</a>
<ul class="sub-menu">
<li>
<a href="#">sub menu item 1</a>
<div class="preview">preview 1</div>
</li>
<li>
<a href="#">sub menu item 2</a>
<div class="preview">preview 2</div>
</li>
<li>
<a href="#">sub menu item 3</a>
<div class="preview">preview 3</div>
</li>
<li>
<a href="#">sub menu item 4</a>
<div class="preview">preview 4</div>
</li>
</ul>
</li>
<li>
<a href="#">menu item 2</a>
<ul class="sub-menu">
<li>
<a href="#">sub menu item 5</a>
<div class="preview">preview 5</div>
</li>
<li>
<a href="#">sub menu item 6</a>
<div class="preview">preview 6</div>
</li>
<li>
<a href="#">sub menu item 7</a>
<div class="preview">preview 7</div>
</li>
<li>
<a href="#">sub menu item 8</a>
<div class="preview">preview 8</div>
</li>
</ul>
</li>
<li>
<a href="#">menu item 3</a>
<ul class="sub-menu">
<li>
<a href="#">sub menu item 9</a>
<div class="preview">preview 9</div>
</li>
<li>
<a href="#">sub menu item 10</a>
<div class="preview">preview 10</div>
</li>
<li>
<a href="#">sub menu item 11</a>
<div class="preview">preview 11</div>
</li>
<li>
<a href="#">sub menu item 12</a>
<div class="preview">preview 12</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>