With simple HTML:
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="IBR_AboutIBR.aspx">About IBR</a></li>
<li><a href="IBR_News.aspx">IBR News</a></li>
<li><a href="IBR_PresidentsLetters.aspx">President's Letters</a></li>
<li><a href="IBR_BBR.aspx">Bulletin (BBR)</a></li>
<li><a href="IBR_Studies.aspx">IBR Studies</a></li>
<li><a href="IBR_Membership.aspx">Membership</a></li>
<li><a href="IBR_EmailContact.aspx">Contact Information</a></li>
<li><a href="IBR_SiteMap.aspx">Site Map</a></li>
<li><a href="#">MenuWithSubMenus</a></li>
<ul>
<li><a href="#">submenu item 1</a></li>
<li><a href="#">submenu item 2</a></li>
<li><a href="#">submenu item 3</a></li>
<li><a href="#">submenu item 4</a></li>
<li><a href="#">submenu item 5</a></li>
</ul>
</ul>
or if you want something nicer...then I suggest that you use some CSS
and Javascript:
<!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"; xml:lang="en" lang="en">
<head>
<title>Sub menu item sample</title>
<style type="text/css">
<!--
.menu {
margin: 0;
padding: 0;
width: 180px; /* width of the menu */
border-top: 1px solid #15387C;
border-bottom: 1px solid #15387C;
border-left: 1px solid #15387C;
border-right: 1px solid #15387C;
position:absolute;
top: 74px; /* position of the menu */
left: 0; /* position of the menu */
overflow: hidden; /* for IE */
float:left;
z-index: 120;
}
.menu .menuitem {
background: #15387C repeat-x bottom left;
font: bold 10pt Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative;
width: auto;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 2px;
text-decoration: none;
}
.menu .menuitem:hover {
background: #FECF00 repeat-x bottom left;
font: bold 10pt Verdana, Helvetica, sans-serif;
color: #000000;
display: block;
position: relative;
width: auto;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 2px;
text-decoration: none;
}
.menu div.submenu {
background: #9DB4DE;
padding-left: 2px;
}
.menu div.submenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu div.submenu ul li{
border-bottom: 1px solid #15387C;
}
.menu div.submenu ul li #selectedSubmenu {
background: #FECF00; /* background of the
selected submenu item */
}
.menu ul li #selectedMenuitem {
background: #FECF00; /* background of the
selected menu item */
color: #000000;
}
.menu div.submenu ul li a {
display: block;
font: normal 10pt Verdana, Helvetica,
sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 8px;
}
.menu div.submenu ul li a:hover{
background: #FECF00;
}
-->
</style>
<script type="text/javascript">
<!--
function is_all_ws( nod )
{
// Use ECMA-262 Edition 3 String and RegExp
features
return !(/[^\t\n\r ]/.test(nod.data));
}
function is_ignorable(nod)
{
return ( nod.nodeType == 8) || // A comment node
( (nod.nodeType == 3) &&
is_all_ws(nod) ); // a text node, all
ws
}
function node_before( sib )
{
while ((sib = sib.previousSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
function first_child( par )
{
var res=par.firstChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.nextSibling;
}
return null;
}
function HideOrShowSubMenu(strId)
{
var menuheader =
node_before(document.getElementById(strId));
var menuheaderimage = first_child(menuheader);
if(document.getElementById(strId).style.display
== "block")
{
document.getElementById(strId).style.display = "none";
// Could display a plus icon on
menuitem because we are hiding
the sub menu
//menuheaderimage.src =
"images/plus.gif";
}
else
if(document.getElementById(strId).style.display == "none")
{
document.getElementById(strId).style.display = "block";
// Could display a minus icon on
menuitem because we are showing
the sub menu
//menuheaderimage.src =
"images/minus.gif";
}
}
// end hiding contents from old browsers -->
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a class="menuitem"
href="Default.aspx">Home</a></li>
<li><a class="menuitem"
href="IBR_AboutIBR.aspx">About IBR</a></
li>
<li><a class="menuitem"
href="IBR_News.aspx">IBRNews</a></li>
<li><a class="menuitem"
href="IBR_PresidentsLetters.aspx">President's Letters</a></li>
<!-- use id selectedMenuitem if you want to put
some menu selected
as default -->
<li><a class="menuitem" href="IBR_BBR.aspx"
id="selectedMenuitem">Bulletin (BBR)</a></li>
<li><a class="menuitem"
href="IBR_Studies.aspx">IBR Studies</a></
li>
<li><a class="menuitem"
href="IBR_Membership.aspx">Membership</a></
li>
<li><a class="menuitem"
href="IBR_EmailContact.aspx">Contact
Information</a></li>
<li><a class="menuitem"
href="IBR_SiteMap.aspx">Site Map</a></li>
<li><a class="menuitem" href="#"
onclick="HideOrShowSubMenu('sub1')">MenuWithSubMenus</a></li>
</ul>
<div id="sub1" class="submenu" style="display:none;">
<ul>
<li><a href="#">submenu item 1</a></li>
<li><a href="#">submenu item 2</a></li>
<!-- use id selectedSubmenu if you want
to put some sub menu
selected as default -->
<li><a href="#"
id="selectedSubmenu">submenu item 3</a></li>
<li><a href="#">submenu item 4</a></li>
<li><a href="#">submenu item 5</a></li>
</ul>
</div>
<ul>
<li><a class="menuitem" href="#">Another
menuitem</a></li>
</ul>
</div>
</body>
</html>
On Jun 7, 6:01 am, OccasionalFlyer <[email protected]> wrote:
> I want to modify the menu of my web site. For reasons I don't know,
> the menu was built with simple HTML:
> <td>
> <ul>
> <li><a href="Default.aspx">Home</
> a></li>
> <li><a
> href="IBR_AboutIBR.aspx">About IBR</a></li>
> <li><a href="IBR_News.aspx">IBR
> News</a></li>
> <li><a
> href="IBR_PresidentsLetters.aspx">President's Letters</a></li>
> <li><a
> href="IBR_BBR.aspx">Bulletin (BBR)</a></li>
> <li><a href="IBR_Studies.aspx">IBR
> Studies</a></li>
> <li><a
> href="IBR_Membership.aspx">Membership</a></li>
> <li><a
> href="IBR_EmailContact.aspx">Contact Information</a></li>
> <li><a
> href="IBR_SiteMap.aspx">Site Map</a></li>
> </ul>
> </td>
> </tr>
>
> I want to add a menu item that will have submenu items. I'm not sure
> how to do this with simple HTML. I would have expected this to use
> the ASP menu control, though I've not used that before. Is there a
> way to do this with the HTML alone? Thanks.
>
> Ken
