CSS only MegaMenu

Preview: what the working site looks like.

Some website title/description here

Heading here

list item
list item
linky

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body> 
    <div id="container">
    <dl id="mega">
        <dt>Some website title/description here</dt>
            <dd>
                <a href="#"><img src="images/03Lily-newTN.jpg" width="80" height="65" alt="lillies"></a>
                    <article> 
                        <img src="images/03Lily-new.jpg" width="300" height="225" alt="lillies"> 
                        <h5>Heading here</h5>
                            <ul>
                                <li>list item</li>
                                <li>list item</li>
                                <li><a href="#">linky</a></li>
                            </ul>
                    </article>
            </dd>
            <dd>
            	<a href="#"><img src="images/020403_sunsetTN.jpg" width="80" height="65" alt="sunset"></a>
                	<article><img src="images/020403_sunset.jpg" width="300" height="225" alt="sunset"></article>
            </dd>
            <dd>
            	<a href="#"><img src="images/IMG_1536TN.jpg" width="80" height="65" alt="beach"></a>
                	<article><img src="images/IMG_1536.jpg" width="300" height="225" alt="beach"></article>
            </dd>
            <dd>
            	<a href="#"><img src="images/IMG_6222-Cape-ElringtonTN.jpg" width="80" height="65" alt="boat"></a>
                	<article><img src="images/IMG_6222-Cape-Elrington.jpg" width="300" height="225" alt="boat"></article>
            </dd>
    </dl>
    <div id="content">
      <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>  
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>  
    <!--end content--></div>	
	<!--container--></div>
</body>
</html>

The CSS

html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
}
dl#mega {
	margin: 60px 0 0;
	padding: 0;
	position: relative;
	list-style: none;
}
	dl#mega dt {
		margin: 0 0 25px 25px;
		font-size: 1.2em;
	}
		dl#mega dd {
			width: 80px;
			margin: 0 0 0 25px;
			float: left;
		}
	dl#mega article {
		width: 600px;
		padding: 20px;
		position: absolute;
		left: -999em;
		overflow: auto;
		border: 2px solid #fff;
		background: #eee;
	}
		dl#mega dd:hover article {left: 25px;}
			dl#mega dd article h5,
			dl#mega dd article ul {
				float: left;
				clear: left;
			}
			dl#mega dd article img {float: right;}
#content {
	clear: both;
	padding: 20px;
}
img {border: none;}