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;}