0

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;}
Attachments cssmenu.jpg 11.22 KB
2
Contributors
2
Replies
3
Views
8 Years
Discussion Span
Last Post by mireille
0

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.

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.