I have a menu div which shows/hides based on click with jQuery, but none of the links are active when you put them in .. ideas?
I only have one item in the list that is a hyperlink. Once I can get it to work, I'll add it to the rest of the items .. however that one link doesn't work.
jQuery
$(".sign_in").click(function() {
$("#sign_box").toggle();
return false;
});
$("body #main").click(function() {
$("#sign_box").hide();
return false;
});
CSS
#sign_box
{
-webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
width:170px;
background-color:#FFF;
border: 5px solid #CCC;
padding:8px;
position:absolute;
display:none;
z-index: 100;
line-height: 16px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-top-radius: 5px 5px;
color: #555;
font-weight: bold;
text-decoration: none;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}
.sign_in
{
color: White;
font-weight: bold;
font-size: 16px;
text-decoration: none;
background-color:#53A1DC;
border-bottom-left-radius: 4px 4px;
border-bottom-right-radius: 4px 4px;
border-top-left-radius: 4px 4px;
border-top-top-radius: 4px 4px;
border:solid 1px #5ea0c1;
padding:6px;
}
a.sign_in span
{
background-image: url("../images/toggle_down_light.png");
background-position: 100% 50%;
background-repeat: no-repeat;
padding-right: 18px;
}
HTML
<div><a href="#" class="sign_in"><span>User Options</span></a></div>
<div id="sign_box">
<ul class="account-links">
<li><a href="../raceday/events/list">All Events</a></li>
<li>My Events</li>
<li>My Profile</li>
<li>All Clubs</li>
<li>Change My Password</li>
<li>My Dependants</li>
</ul>
</div>