CSS - 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:

  <span id="right">
    <ul>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    </ul>
  </span>

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;             
}

You aren't utilizing a class of .text anywhere in your HTML example and there isn't any CSS in your example that sets the text to white in the first place. Try making a JSFiddle that shows your issue. — Matthew Darnell
– Matthew Darnell, Commented Apr 10, 2014 at 16:57

AlieN · Accepted Answer · 2014-04-10 16:58:10Z

1

Shouldn't it be

<span class="submenu">

answered Apr 10, 2014 at 16:58

AlieN

5432 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-04-10 17:05:19Z

That would never ever work. Due to the reason that the parent element of the list (ul) is having an id or right now submenu.

Now since you're having the CSS for the submenu, you can change your HTML to meet the requirements other than changing your whole CSS file.

<span id="submenu">
    <ul>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    <li><span class="blue-arrow"></span><span class="newsheading"><a href="#">Gamesites má nový web ou jeeee!</a></span><span class="blueballoon">10</span><span class="balloon">10</span></li>
    </ul>
  </span>

Please note the className of submenu wouldn't work because # isn't a className selector. That is an ID selector.

This won't work:

<span class="submenu"> <!-- creating the class, not the id -->

Collectives™ on Stack Overflow

CSS - Color is not changing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related