Hmmm, well, you could do it using a simple method of creating a background that would be the aqua box and the images sticking out the side, then make your text links from 3 separate UL lists placed inside of 3 separate div's. The background would be the master div and have the background. Kinda like this:
#menucontainer {
background-image: url('menubackground.jpg');
background-repeat: no-repeat;
width: 175px;
height: 500px;
float: left;
padding: 5px;
}
/* then the menus */
#menu1{
width: 130px;
margin: 25px 0 0 10px;
overflow: auto; // so the height is determined by the number of links
float: left;
}
#menu3{
width: 130px;
margin: 25px 0 0 10px;
overflow: auto; // so the height is determined by the number of links
float: left;
}
#menu3{
width: 130px;
margin: 25px 0 0 10px;
overflow: auto; // so the height is determined by the number of links
float: left;
}
Then in the HTML it would be something like this:
<div id="menucontainer">
<div id="menu1">
<ul>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
</ul>
</div>
<div id="menu3">
<ul>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
</ul>
</div>
<div id="menu3">
<ul>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
</ul>
</div>
</div>