dropdown menu not working with on page built with div columns

**pmready** · 05-06-2014, 04:14 PM

I have used borrowed code to build drop down navigation menus that work. You can see how they are supposed to look at www.loudounfreedom.com. Hover over the TEAMS navigation button to see. However, when I used the code on the a page that is built using div columns, the effect isn't the same. The shadow is prominent. The text is smaller. The rows don't extend all the way to the right. I would have to give a login-password to show the page that has this poor effect. Or move a sample page outside a password-protected section. I have asked for help. I see people viewing posts but not replying.

Code:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: #092869
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid navy;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: ffffff;
color: #092869;
width: 200px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
color: #092869;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid navy;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #092869;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #E99A02;
color: #092869;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid navy;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E99A02;
}

.anylinkmenucols li{
padding-bottom: 3px;
color: #092869;
}

.anylinkmenucols .column{
float: left;
padding: 3px 3px;
margin-right: 5px;
background: #092869;

}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: #092869;
visibility: hidden;
}

**pmready** · 05-06-2014, 04:15 PM

js for menu content:

Code:

var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:185px;', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu1.cols={divclass:'column', inlinestyle:'width:185px;'} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu1.items=[
	["3rd Grade (Fagan)", "teams/2014Fagan3.html"],
	["4th Grade (Esser)", "teams/2014Esser.html"],
	["4th Grade (Haines)", "teams/2014Haines.html"],
	["4th Grade (Stimart)", "teams/2014Stimart.html"],
	["5th Grade (Cohoon)", "teams/2014Cohoon.html"],
	["5th Grade (Randall)", "teams/2014Randall.html"],
	["5th Grade (T.Turner)", "teams/2014TTurner.html"],
	["6th Grade (Fagan)", "teams/2014Fagan.html"],
	["6th Grade (Webb)", "teams/2014Webb.html"],
	["6th Grade (Williams)", "teams/2014Williams.html"],
	["7th Grade (Berry)", "teams/2014Berry.html"],
	["7th Grade (McFarlane)", "teams/2014McFarlane.html"],
	["7th Grade (Tim)", "teams/2014TIm.html"],
	["8th Grade (Hills)", "teams/2014Hills.html"],
	["8th Grade (Turner)", "teams/2014Turner.html"],
	["10th Grade (Clarke)", "teams/2014Clarke.html"],
	["10th Grade (McFarlane)", "teams/2014McFarlaneHS.html"] //no comma following last entry!
]

var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:125px;', linktarget:''} //Second menu variable. Same precaution.
anylinkmenu2.items=[
	["General FAQs", "faq.html"],
	["Tryout FAQs", "faq2.html"],
	["Parent Center", "parentcenter.html"] //no comma following last entry!
]


var anylinkmenu3={divclass:'anylinkmenu', inlinestyle:'width:170px;', linktarget:''} //Third menu variable. Same precaution.
anylinkmenu3.items=[
	["Coaching Resources", "coach/resources.html"],
	["Coaches Roles", "coach_roles.html"],
	["Coaching Application", "coaching_application.html"] //no comma following last entry!
]

var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:185px;', linktarget:''}
anylinkmenu4.cols={divclass:'column', inlinestyle:'width:185px;'} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu4.items=[
	["3rd Grade (Fagan)", "../teams/2014Fagan3.html"],
	["4th Grade (Esser)", "../teams/2014Esser.html"],
	["4th Grade (Haines)", "../teams/2014Haines.html"],
	["4th Grade (Stimart)", "../teams/2014Stimart.html"],
	["5th Grade (Cohoon)", "../teams/2014Cohoon.html"],
	["5th Grade (Randall)", "../teams/2014Randall.html"],
	["5th Grade (T.Turner)", "../teams/2014TTurner.html"],
	["6th Grade (Fagan)", "../teams/2014Fagan.html"],
	["6th Grade (Webb)", "../teams/2014Webb.html"],
	["6th Grade (Williams)", "../teams/2014Williams.html"],
	["7th Grade (Berry)", "../teams/2014Berry.html"],
	["7th Grade (McFarlane)", "../teams/2014McFarlane.html"],
	["7th Grade (Tim)", "../teams/2014TIm.html"],
	["8th Grade (Hills)", "../teams/2014Hills.html"],
	["8th Grade (Turner)", "../teams/2014Turner.html"],
	["10th Grade (Clarke)", "../teams/2014Clarke.html"],
	["10th Grade (McFarlane)", "../teams/2014McFarlaneHS.html"] //no comma following last entry!
]

var anylinkmenu5={divclass:'anylinkmenu', inlinestyle:'width:125px;', linktarget:''} //Second menu variable. Same precaution.
anylinkmenu5.items=[
	["General FAQs", "../faq.html"],
	["Tryout FAQs", "../faq2.html"],
	["Parent Center", "../parentcenter.html"] //no comma following last entry!
]

var anylinkmenu6={divclass:'anylinkmenu', inlinestyle:'width:170px;', linktarget:''} //Third menu variable. Same precaution.
anylinkmenu6.items=[
	["Coaching Resources", "resources.html"],
	["Coaches Roles", "../coach_roles.html"],
	["Coaching Application", "../coaching_application.html"] //no comma following last entry!
]

**pmready** · 05-06-2014, 04:26 PM

code of page not working well

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loudoun Freedom: 2014 Teams - Berry</title>
<link rel="stylesheet" type="text/css" href="../files/freedom.css">
<link rel="stylesheet" type="text/css" href="../files/anylinkmenu.css" />
<script type="text/javascript" src="../files/menucontents.js"></script>
<script type="text/javascript" src="../files/anylinkmenu.js"></script>
<script type="text/javascript">
//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")</script>
<style type="text/css">
ul {
    font-family: Calibri;
    font-size: 13px;
    line-height: 8px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
	float: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #092869;
	line-height: 8px;
    border-top: 1px solid #ffffff;
    padding: 6px 2px 6px 2px;
    background: #ffffff;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
   	color: #120250;
	background-color: #E99A02;
}
li:hover ul {
	display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 13px;
}
li:hover a { background: #ffffff; }
li:hover li a:hover {
    color: #120250;
	background-color: #E99A02;
}

</style>
</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div id="page">

<div id="top">
<img src="../images/banner.jpg" width="1350" height="150" border="0">
</div>

<div id="headerslice">
<img src="../images/spacer.gif" width="1" height="5" border="0">
</div>

<div id="navbar">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr bgcolor="#120250" >
   <td width="110"><a href="../index.html"><img src="../images/home.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../about.html"><img src="../images/about.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../teams.html" class="menuanchorclass" rel="anylinkmenu4" data-image="../images/teams.gif" data-overimage="../images/teams_on.gif"><img src="../images/teams.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../coach.html" class="menuanchorclass" rel="anylinkmenu6" data-image="../images/coaches.gif" data-overimage="../images/coaches_on.gif"><img src="../images/coaches.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../events.html"><img src="../images/events.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../registration.html"><img src="../images/registration.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../faq.html" class="menuanchorclass" rel="anylinkmenu5" data-image="../images/faqs.gif" data-overimage="../images/faqs_on.gif"><img src="../images/faqs.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../spiritwear.html"><img src="../images/spiritwear.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../sponsors.html"><img src="../images/sponsors.gif" width="110" height="25" border="0"></a></td>
   <td width="110" align="left"><a href="../links.html"><img src="../images/links.gif" width="110" height="25" border="0"></a></td>
  </tr>
</table>
</div>

<div id="leftside">
<table width="98%" border="0" cellpadding="0" cellspacing="0">
	 <tr>
        <td valign="top"><p><img src="../images/logo2_freedom.jpg" width="99" height="85" border="0" alt="Freedom Logo"></p>
		<p><a href="history_berry.html" class="sidenav">Historical Record</a></p>
		<ul id="menu">
		<li><a href="#">Team Photos</a>
		<ul>
		<li><a href="photos9_berry.html">7th Grade - Challenge</a></li>
		<li><a href="photos8_berry.html">7th Grade - MD Flames</a></li>
		<li><a href="photos7_berry.html">7th Grade - Paul VI</a></li>
		<li><a href="photos6_berry.html">7th Grade - JMU</a></li>
		<li><a href="photos5_berry.html">MD Flames - Nov 2</a></li>
		<li><a href="photos4_berry.html">7th Grade - FLG</a></li>
		<li><a href="photos3_berry.html">MD Flames - Oct 12</a></li>
		<li><a href="photos2_berry.html">MD Flames - Sept 28</a></li>
		<li><a href="photos1_berry.html">MD Flames - Sept 14</a></li>
		</ul>
		</li>
		</ul>
		</td>
	</tr>
</table>
</div>

<div id="coach">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="18%">&nbsp;</td>
            <td width="18%">&nbsp;</td>
            <td width="16%">&nbsp;</td>
            <td width="16%">&nbsp;</td>
            <td width="16%">&nbsp;</td>
			<td width="16%">&nbsp;</td>
          </tr>
          <tr class="title">
            <td colspan="5">&nbsp;7th Grade - Berry<br>&nbsp;</td>
            <td align="right">Spring 2014&nbsp;&nbsp;<br>&nbsp;</td>
          </tr>
          <tr class="section" bgcolor="#E99A02" valign="middle">
            <td>&nbsp;Head Coach</td>
            <td>&nbsp;Assistant Coach</td>
            <td colspan="4"><br />&nbsp;</td>
          </tr>
          <tr class="body">
            <td>&nbsp;Peter Berry<br />
              &nbsp;<a href="mailto:berry@loudounfreedom.com" class="body">berry@loudounfreedom.com</a></td>
            <td>&nbsp;John Fenton<br />
              &nbsp;<a href="mailto:fenton@loudounfreedom.com" class="body">fenton@loudounfreedom.com</a></td>
            <td colspan="4">&nbsp;</td>
          </tr>
</table>
</div>


<div id="collage4">

<table width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top"><img src="images/berry_teamcollage.jpg" width="900" height="661" /></td>
	</tr>
</table>
</div>

<div id="roster">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="95%" class="noborder">
								<tr>
									<td class="body" align="left" valign="top"><p class="section">Team Roster:</p>
                  					<p class="body">Hope Alston<br />
                   	 				Katana Alston<br />
  									Izzy Berry<br />
									Lydia Ditthardt<br>
									Micaela Elhafdi<br>
									Emma Fenton<br />
									Noelle Foster<br>
									Jillian Hacker<br />
									Shayna Lubitz<br />
									Grace Lynch<br />
									Karleigh Pollock<br />
									Laryssa Wade<br /></p></td>
								</tr>
							</table>
</div>

<div id="rightimage4">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="95%" class="noborder">
								<tr>
									<td class="body" align="center" border="0">
                  					<img src="../images/freedomlooks1_sm.jpg" width="248" height="165" border="0" />
									</td>
								</tr>
								<tr>
									<td align="center" valign="bottom"><img src="../images/basketball_animated.gif" width="60" height="100" border="0" />
									</td>
								</tr>
							</table>
</div>

<div id="calendar4">
	<table width="99%" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td align="left" ><p class="section">&nbsp;&nbsp;Team Calendar:</p>
						<p align="center"><iframe src="https://www.google.com/calendar/embed?height=430&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=c79m79rnr039k92jf102051be8%40group.calendar.google.com&amp;color=%23182C57&amp;ctz=America%2FNew_York" style=" border-width:0 " width="650" height="430" frameborder="0" scrolling="no"></iframe></p>
						</td>
					</tr>
				</table>
</div>

<div id="teamrecord4">
<table width="99%" cellpadding="0" cellspacing="0">
					<tr>
						<td align="left" valign="top"><p class="section">&nbsp;&nbsp;Team Season Record: 4-7</p>
							<table width="99%" cellspacing="0" cellpadding="0" align="center" class="define2">
             					<tr align="left" class="section">
								   	<th width="20%">Date</th>
								   	<th width="60%">Opponent</th>
								   	<th width="20%">Result</th>
								</tr>						
 								<tr class="body">
									<td>3/22/14</td>
									<td>Gainesville Elite Tigers (Soltys)</td>
									<td>L</td>
								</tr>											
 								<tr class="body">
									<td>3/22/14</td>
									<td>Spotsy Sting (Via)</td>
									<td>L</td>
								</tr>								
           				 	</table>
					  </td>
					</tr>
				</table>
</div>

<div id="footer4">
<br><hr width="100%">For information, contact the Loudoun Freedom at <a href="mailto:loudounfreedombball@gmail.com">loudounfreedombball@gmail.com</a>
</div>

</div>
</body>
</html>

**pmready** · 05-06-2014, 07:16 PM

other relevant css.... from freedom.css file

Code:

#page {
  background:#FFFFFF;
  margin-left:auto;
  margin-right:auto;
  width:1350px;
  text-align: center;
  border-left: 1px solid #e99a02;
  border-right: 1px solid #e99a02;
  border-bottom: 1px solid #e99a02;
  border-color: #e99a02;
  position: relative;
}

#top {
	width:1350px;
    height:150px;
	background-color:#ffffff;
    text-decoration:none;
	position: absolute;
	top: 0px;
}

#headerslice {
    width:1350px;
	height:5px;
	background-color:#e99a02;
    text-decoration:none;
	position: absolute;
	top:150px;
}

#navbar {
    width:1350px;
    height:25px;
	background-color:#120250;
    text-decoration:none;
	position: absolute;
	top: 154px;
}

#coach {
    width:1205px;
	background-color:#ffffff;
    text-decoration:none;
	position: absolute;
	top: 185px;
	left:150px;
    text-align: left;
}

#collage4{
    width:900px;
	height:661px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
	position: absolute;
	top: 355px;
	left:150px;
}

#rightimage4{
 	width:270px;
	height:325px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
	position: absolute;
	top:690px;
	left:1062px;
}

#calendar4{
    width:665px;
	height:490px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
	position: absolute;
	top: 1031px;
	left:150px;
	vertical-align:middle;
}

#teamrecord4{
    width:502px;
	height:490px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
	position: absolute;
	top: 1031px;
	left:830px;
}

#footer4 {
    width:88%;
	background:#ffffff;
    text-decoration:none;
	position: absolute;
	top: 1526px;
	left:155px;
	font-size: 12pt; 
	font-family: Calibri; 
	font-style: normal; 
	font-weight: 200; 
	color: #092869;
}

**jscheuer1** · 05-07-2014, 03:40 AM

I would have to give a login-password to show the page that has this poor effect. Or move a sample page outside a password-protected section.

Yes, do one or the other of those please.

**pmready** · 05-07-2014, 05:23 PM

I won't give the login/pwd publicly. sample page
http://www.loudounfreedom.com/2014Berry.html

contrasted with
http://www.loudounfreedom.com/

hover over the TEAMS navigation image.

**jscheuer1** · 05-08-2014, 12:51 AM

Add the highlighted as shown to the loudounfreedom.com/files/anylinkmenu.css file:

Code:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: #092869
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
background-color: white;
border: 1px solid navy;
border-bottom-width: 0;
font: normal 12px Verdana;

**pmready** · 05-08-2014, 02:01 AM

John, first, thank you. I added it. It removed the shadow of course. However, there are still issues: (1) the text is smaller and the nav items are smaller in the 2014Berry.html file and (2) the lines that separate each row do not extend to the far right of each nav item. The effect is still different.

**jscheuer1** · 05-08-2014, 05:04 AM

Get rid of this:

Code:

<style type="text/css">
ul {
    font-family: Calibri;
    font-size: 13px;
    line-height: 8px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
	float: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #092869;
	line-height: 8px;
    border-top: 1px solid #ffffff;
    padding: 6px 2px 6px 2px;
    background: #ffffff;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
   	color: #120250;
	background-color: #E99A02;
}
li:hover ul {
	display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 13px;
}
li:hover a { background: #ffffff; }
li:hover li a:hover {
    color: #120250;
	background-color: #E99A02;
}

</style>

**pmready** · 05-08-2014, 12:27 PM

that is used for dropdown for a different functionality, for a different purpose on the page. There is a team photo dropdown on the left side that shows items...different from the main nav. Is there a conflict between that and the other code? I know it may seem like piecemeal functionality for different things.