html <a> not clickable inside menu - html

Question

I have the following menu, the <a>'s are not clickable, i believe it is a z-index problem but haven't been able to fix it. Also does the html make sense, trying to make a circle with a connected rectangle on the right. Then when it drops down it will be fully connected and filled in. I am using bootstrap 2.3.2.
jsfiddle link
html
<div class="row-fluid">
<div class="span2"></div>
<div class="span7 center"></div>
<div class="span3">
<div class="rightMenu visible-desktop">
<div class="scoreBadge">--</div>
<div class="userBadge"> username ▼
</div>
<ul>
<li> settings
</li>
<li> log out
</li>
</ul>
</div>
</div>
</div>
css
.rightMenu{
position: absolute;
right: 0;
top: 8px;
margin-top: 10px;
min-width: 65px;
}
.rightMenu ul {
display: none;
list-style: none;
text-align: left;
position: relative;
left: -10px;
top: -30px;
background-color: #4b86a1;
color: white;
z-index: -2;
margin-left: 10px;
padding: 20px 10px 10px 10px;
}
.rightMenu ul li {
}
.rightMenu:hover ul {
display: block;
}
.rightMenu ul a {
color: white;
}
.scoreBadge {
display: inline-block;
background: white;
color: #4B86A1;
height: 30px;
width: 30px;
border: 2px solid #fcdf05;
border-radius: 50%;
text-align: center;
line-height: 30px;
vertical-align: middle;
font-size: 18px;
}
.userBadge {
display: inline-block;
background-color: #4b86a1;
vertical-align: middle;
padding-left: 10px;
line-height: 30px;
min-width: 49px;
position: relative;
left: -10px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
text-align: right;
z-index: -1;
}
.userBadge > a {
padding: 0 5px 0 5px;
line-height: 25px;
}
#usrName {
color: white;
font-size: 10pt;
font-weight: normal;
text-transform: uppercase;
}

Answer 1

In your css you have
.rightMenu ul {
display: none;
list-style: none;
text-align: left;
position: relative;
left: -10px;
top: -18px;
background-color: #4b86a1;
color: white;
z-index: -2; /* this is the problem */
margin-left: 10px;
padding: 20px 10px 10px 10px;
}
Just remove the - from z-index: -2; and it'll work. Also, without z-index: 2; it seems working fine, so why not just remove the z-index property ? An example here (with z-index:2) and another example (without z-index property).

Answer 2

I solved for you the problem see the change the z-index to 2 in the Class .rightMenu ul