Member Avatar for mireille

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;}
cssmenu.jpg 11.22 KB
  • 2 Contributors
  • 2 Replies
  • 85 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by mireille
Member Avatar for Xastain

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.

Member Avatar for mireille

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.