I picked up some simple JQuery code for an accordian menu. Here is the page it is working on:
http://www.inboundlogistics.com/digital/The links in the accordian work fine but the other links on the page shift 20px left and adopt the focus style of ul#menu li ul li a when clicked. I thought this was a simple CSS problem but now I think it might be a Jquery problem since it only effects links when I click them. I also tried making an <a> class for the links inside the <li> tags but that didn't work. Can anyone help me figure out what I am doing wrong?
Below is the function:
function initMenu() {
$(”#menu ul”).hide();
$(”#menu li a”).click(
function() {
$(this).next().slideToggle(”normal”);
}
);
return false;
}
$(document).ready(function() {initMenu();});
The whole thing is formatted using CSS. The .click function forces all my links ona page to pick up the a href style in the li tag within a ul with an id=menu. even though I have defined both the li and a normal a href tag in the CSS. Below is the CSS:
a:link{
color:#003366;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
padding:0px;
margin:0px;
border:0px;
}
a:hover, a:active, a:focus{
text-decoration:underline;
padding:0px;
margin:0px;
border:0px;
}
a:visited, {
color:#666666;
text-decoration:none;
font-weight:bold;
padding:0px;
margin:0px;
border:0px;
}
ul#menu{
list-style-type:none;
margin: 0px;
padding: 0px;
width: 168px;
}
ul#menu ul{
list-style-type:none;
margin: 0px;
padding: 0px;
width: 168px;
}
ul#menu a{
outline: none;
font-weight:normal;
display: block;
text-decoration: none;
line-height: 1.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
}
ul#menu li{
}
ul#menu li a{
outline: none;
background: #eee;
color: #036;
margin-bottom: 2px;
padding-left: 8px;
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
}
ul#menu li a:hover, a:active, a:focus{
outline: none;
background: #ddd;
border-left: 3px #036 solid;
padding-left: 6px;
}
ul#menu li ul li a{
outline: none;
line-height: 1.5em;
font-size: 0.8em;
font-weight:normal;
background: #eee;
color: #555;
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
border-bottom: 0px;
border-right: 0px;
padding-left: 20px;
margin-left: 15px;
margin-bottom: 2px;
}
ul#menu li ul li a:hover, a:active, a:focus{
outline: none;
color: #cef;
background: #036;
padding-left: 20px;
border-left: 1px #ccc solid;
}
Also, here is the HTML code on the page:
<TR>
<TD vAlign=top align=left style="padding-top:10px">
<p class=smallsans align=center style="padding:0px; margin:0px; background:#aaa; line-height:2em"><span style="font-size:1.2em; color:#fff; font-weight:bold">[text]</span><br>
<ul id="menu">
<li>
<a href="javascript:void(0);"><b>[text]</b> <span style="font-size:.8em">[text]</span></a>
<ul>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><b>[text]</b> <span style="font-size:.8em">[text]</span></a>
<ul>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><b>[text]</b> <span style="font-size:.8em">[text]</span></a>
<ul>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><b>[text]</b> <span style="font-size:.8em">[text]</span></a>
<ul>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
<li><a href="link">[text]</a></li>
</ul>
</li>
</ul></p></TD></TR>
Thank you, Shawn