I'd like to create a menu like the image I attached below. My problem is the submenu. How do I place it so that it appears in that submenu field? Other than that, I'd also like to have the submenu appear on click, not on hover. Like the one on this site: Cssplay.co.uk

My html code is:

<div id="nav">

<div id="wrapper">
<div id="container">

<div class="menunav-left">

<ul id="vertical">
<li class="navheight"><a href="#1"><em>h</em><em>o</em><em>m</em><em class="nd">e</em></a></li>
<li class="navheight"><a href="#2"><em>i</em><em>n</em><em>s</em><em>i</em><em>d</em><em class="nd">e</em></a></li>
<li class="navheight2"><a href="#3"><em>g</em><em>a</em><em>l</em><em>l</em><em>r</em><em>r</em><em class="nd">y</em></a></li>
<li class="navheight"><a href="#4"><em>c</em><em>r</em><em>e</em><em>d</em><em>i</em><em>t</em><em class="nd">s</em></a></li>
<li class="navheight"><a href="#5"><em>l</em><em>i</em><em>n</em><em>k</em><em class="nd">s</em></a></li>
<li class="navheight"><a href="#6"><em>u</em><em>s</em><em>e</em><em>r</em><em class="nd">s</em></a></li>
</ul>

</div>

<div class="menunav-right menunav-pad">
<a href="#7">Link submenu</a><br />
<!-- Here's where I'd like to have the submenu. -->
</div>

<div class="clearer"></div>
</div>
</div>

</div>

The css code is:

#vertical li.navheight {
height: 103px;
background: url(images/bg_navi.jpg) no-repeat left bottom #fff;
margin: 0 4px 11px 0;
}

#vertical li.navheight2 {
height: 103px;
background: url(images/bg_navi2.jpg) no-repeat left bottom #495259;
margin: 0 4px 11px 0;
color:#fff;
}


#vertical {
  width:303px;
  padding:0;
  margin:0 auto;
  list-style-type:none;
  font-size:12px;
  font-family:Arial;
  color:#000;
  }
  
#vertical li {
  float:left;
  margin: 0 4px 0 0;
  }
  
#vertical li a {
  text-decoration:none;
  color:#000;
  display:block;
  width:20px;
  padding: 3px 0 0 0;
  height:auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Verdana;
  margin: 0 0 9px 0;
  }
#vertical li a em {
  font-style:normal;
  display:block;
  text-align:center;
  height:12px;
  }
#vertical li a em.nd {
  padding: 0;
  }
#vertical li a:hover {
  background: url(images/bg_navi2.jpg) no-repeat left bottom #495259;
  color:#fff;
  height: 100px;
  }
#vertical li a:hover em {
  background:#495259;
  color:#fff;
  }


.menunav-left {float:left; width:146px;}
.menunav-right {float:right; width:147px; height:96px; background:#4A5259; padding:0;}
.menunav-pad {padding:6px 0 0 10px;}

#wrapper {
   width: 303px;
   padding: 0;
   margin: 0;
   height: auto;
   text-align: left;
}

#container {padding:0; margin:0;width:100%;}
.clearer {font-size:0;line-height:0;display:block;margin:0;padding:0;clear:both;height:0;width:auto;}

Would you mind pasting your complete HTML code for the specific page/document, please? It just makes it so much easier to evaluate and troubleshoot.

Hi Xastain,
Of course. This one below should do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Website</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="Author" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="ROBOTS" content="INDEX, FOLLOW" />
<style type="text/css">

a{cursor:default;color:#AEAEAE; text-decoration:none; cursor:pointer;}
a:link{color:#AEAEAE; text-decoration:underline; cursor:pointer;}
a:visited{color:#AEAEAE; text-decoration:underline; cursor:pointer;}
a:hover{color:#fff; text-decoration:none; cursor:pointer;}
a:active{color:#fff; text-decoration:none; cursor:pointer;}

body {
   font-family: Arial;
   font-size: 12px;
   color: #fff;
   text-align: left;
   background: #101519;
}


#main {width:978px; padding:0; border: 0px solid #F60C53;}
#left {padding:0px; width:303px;}

.menunav-left {float:left; width:146px;}
.menunav-right {float:right; width:147px; height:96px; background:#4A5259; padding:0;}
.menunav-pad {padding:6px 0 0 10px;}


#vertical li.navheight {
height: 103px;
background: url(images/bg_navi.jpg) no-repeat left bottom #fff;
margin: 0 4px 11px 0;
}

#vertical li.navheight2 {
height: 103px;
background: url(images/bg_navi2.jpg) no-repeat left bottom #495259;
margin: 0 4px 11px 0;
color:#fff;
}


#vertical {
  width:303px;
  padding:0;
  margin:0 auto;
  list-style-type:none;
  font-size:12px;
  font-family:Arial;
  color:#000;
  }

#vertical li {
  float:left;
  margin: 0 4px 0 0;
  }

#vertical li a {
  text-decoration:none;
  color:#000;
  display:block;
  width:20px;
  padding: 3px 0 0 0;
  height:auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Verdana;
  margin: 0 0 9px 0;
  }
#vertical li a em {
  font-style:normal;
  display:block;
  text-align:center;
  height:12px;
  }
#vertical li a em.nd {
  padding: 0;
  }
#vertical li a:hover {
  background: url(images/bg_navi2.jpg) no-repeat left bottom #495259;
  color:#fff;
  height: 100px;
  }
#vertical li a:hover em {
  background:#495259;
  color:#fff;
  }

#wrapper {
   width: 303px;
   padding: 0;
   margin: 0;
   height: auto;
   text-align: left;
}

#container {padding:0; margin:0;width:100%;}
.clearer {font-size:0;line-height:0;display:block;margin:0;padding:0;clear:both;height:0;width:auto;}
</style>
</head>
<body>



<table id="main" cellpadding="0" cellspacing="0" align="center">
<tr>

<!-- -->
<td valign="top">

<div id="left">

<div id="nav">
<div id="wrapper">
<div id="container">

<div class="menunav-left">

<ul id="vertical">
<li class="navheight"><a href="#1"><em>l</em><em>i</em><em>n</em><em class="nd">k</em></a></li>
<li class="navheight"><a href="#2"><em>l</em><em>i</em><em>n</em><em class="nd">k</em></a></li>
<li class="navheight2"><a href="#3"><em>l</em><em>i</em><em>n</em><em class="nd">k</em></a></li>
<li class="navheight"><a href="#4"><em>l</em><em>i</em><em>n</em><em class="nd">k</em></a></li>
<li class="navheight"><a href="#5"><em>l</em><em>i</em><em>n</em><em class="nd">k</em></a></li>
<li class="navheight"><a href="#6"><em>l</em><em>i</em><em>n</em><em class="nd">k</em></a></li>
</ul>

</div>

<div class="menunav-right menunav-pad">
* Sublinks here when clicking on a link* <br />
<a href="#9">sublink</a><br />
<a href="#10">sublink</a><br />
<a href="#11">sublink</a><br />
<a href="#12">sublink</a><br />
</div>

<div class="clearer"></div>
</div>
</div>

</div>
</div>

</td>
</tr>

<!-- -->
</table>


     </body>
     </html>