Wow Stefan. Thanks for the _huge_ help. That's more CSS than I knew. Ken
On Jun 8, 1:11 am, Stefan Brandt <[email protected]> wrote: > 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
