Menu styling hover - html

Question

i have a menu with sub menu, that when its hover the <a> in the sub-menu is doesnt show the font, only it's shadow if you look closly. i have tried changing alot of code but nothing is working . here is the menu:http://jsfiddle.net/2fDQz/16/ ( sub menu on home and admin)
here is the css:(although you can see it in the jsfiddle)
body {
}
/* Base Styles */
#personalbar ul,
#personalbar li,
#personalbar a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1;
font-family: 'Lato', sans-serif;
}
#personalbar {
border: 1px solid #123e3f;
width: auto;
}
#personalbar ul {
zoom: 1;
background: #33b3b7;
background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f));
background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: linear-gradient(top, #33b3b7 0%, #288c8f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#top-color', endColorstr='#bottom-color', GradientType=0);
padding: 5px 10px;
}
#personalbar ul:before {
content: '';
display: block;
}
#personalbar ul:after {
content: '';
display: table;
clear: both;
}
#personalbar li {
float: left;
margin: 0 5px 0 0;
border: 1px solid transparent;
position:relative;
}
#personalbar li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px 9px 15px;
display: block;
text-decoration: none;
color: #ffffff;
border: 1px solid transparent;
font-size: 16px;
}
#personalbar li.active {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #33b3b7;
}
#personalbar li.active a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1d6567;
border: 1px solid #123e3f;
-moz-box-shadow: inset 0 5px 10px #123e3f;
-webkit-box-shadow: inset 0 5px 10px #123e3f;
box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar li:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #33b3b7;
}
#personalbar li:hover a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1d6567;
border: 1px solid #123e3f;
-moz-box-shadow: inset 0 5px 10px #123e3f;
-webkit-box-shadow: inset 0 5px 10px #123e3f;
box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar ul ul li:hover a ,
#personalbar li:hover li a
{
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#personalbar ul ul a:hover
{
background: #7d7d7d;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#personalbar li:hover > ul {
display: block;
}
#personalbar ul ul
{
position:absolute;
z-index: 1000;
display: none;
margin: 0;
padding: 0;
min-width: 100%;
top: 35px;
left: 0;
background: #ffffff;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#personalbar ul ul li {
position: relative;
float: none;
margin: 0;
padding: 3px;
}
html:
<div id='personalbar'style="position:absolute; top:0%;left:0%; width:100%;">
<ul>
<li><a href='# '><span>Home</span></a>
<ul>
<li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>blasdfgsfgsg</span></a></li>
<li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a></li>
</ul></li>
<li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a></li>
<li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a></li>
<li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a>
<ul>
<li runat="server"><span>bla</span></li>
<li runat="server"><span>bli</span></li>
</ul>
</li>
<li id="L3" runat="server" style="position:absolute; right:1%;" ><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a></li>
</ul>
</div>
Thanks fopr the Help :D

Answer 1

color: #000000 !important;
change your color in #personalbar ul ul a:hover{}
Fiddle
Remove
color: #fff !important;
is a white color. So, only you can't able to see the text...

Answer 2

In your:
#personalbar ul ul a:hover
{
background: #7d7d7d;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
Change color to color: #000;
FIX