CSS - Font color is not changing - html

Question

i am trying to fix a color of my TEXT color, its just WHITE so same color as background, dispite the fact its color is set for :#1a6eb6 and its set for same value in #submenu ul li .text I am prettz lost in it, can somebody help me with it?
My HTML:
<div class="submenu">
<ul>
<li><span class="text">DISKUSNÍ FÓRUM </span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
<li><span class="text">KOMENTÁŘE </span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
<li><span class="text">ZÁZNAM CHATU </span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
<li><span class="text">UŽÍVATELÉ</span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
</ul>
</div>
My CSS:
.submenu{
color: #1a6eb6;
display: inline-block;
height: 50px;
width:780px;
}
.submenu ul {
margin-left: 20px;
padding-left: 0px;
}
.submenu ul li{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
height: 38px;
width: 187px;
display: inline-block;
color: #1a6eb6;
}
.submenu ul li:hover {
background-image: url("images/shop_menu_bg_hover.png");
width: 187px;
height: 38px;
}
.submenu ul li .text{
color: #1a6eb6;
display: inline-block; /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/
height: 31px;
width:115px;
line-height: 28px;
margin-left: 5px;
}
.submenu ul li .horizontal-arrow{
background-image: url("images/horizontal_arrow.png");
background-repeat: repeat-x;
display: inline-block;
height: 19px;
width: 14px;
margin: 0px 0px 0px 45px;
vertical-align: middle;
}
.submenu ul li:hover .horizontal-arrow{
display:none;
}
.submenu ul li .vertical-arrow{
background-image: url("images/vertical_arrow.png");
background-repeat: repeat-x;
display:none;
height: 12px;
width: 19px;
margin: 0px 0px 0px 45px;
}
.submenu ul li:hover .vertical-arrow{
display: inline-block;
}
Live Preview can be find on: http://funedit.com/andurit/new/

Answer 1

Try adding the color to .submenu ul li .text a
.submenu ul li .text a{
color: #1a6eb6;
}
Font color was not changing because your styles.css had the below style which was overriding the color you specified to .submenu ul li .text
li a:link {
color: #f7f7f7;
}

Answer 2

You need to set the color of the <a> tag because that tag has color white.
something like:
.submenu ul li a{
color: #1a6eb6;
}

Answer 3

Many popular user agent stylesheets include a rule that selects a and sets its color:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
This is sort of a blue-ish color. Moreover, your style.css has:
li a:link {
color: #f7f7f7;
font-weight: bold;
text-decoration: none;
}
This overrides the UA stylesheet and is why the link appears white. You need to actually select the a with your rule:
.submenu a:link {
color: #1a6eb6;
}
The :link part is necessary because of the specificity of the li a:link selector. You could also do .submenu li a or some other more specific selector.

Answer 4

if you just want to change the color of your text, you probably should use the "a" element like this:
#submenu ul li a{
//your code
}

Answer 5

Change css line 183 for element to
li a:visited
{
color: #1a6eb6;
}
Or you could create a new css selector like
.submenu ul li a
{
color: #1a6eb6;
}

Answer 6

style.css line 183 - you have li a:visited {color:#f7f7f7};
style.cc line 173 - you have li a:link {color:#f7f7f7;}
This is I got from chrome console. check these lines in your css file and take out the color:#f7f7f7
you can also use the !important rule in css to make sure that rule overwrites any other rule.
What does !important in CSS mean?
.submenu{
color: #1a6eb6 !important;;
}