CSS - Font color is not changing

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"><a href="#">DISKUSNÍ FÓRUM </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">KOMENTÁŘE </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">ZÁZNAM CHATU </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">UŽÍVATELÉ</a></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;; }