Question

我正在尝试修复我的TEXT颜色的颜色，它只是白色和背景颜色相同，请注意它的颜色设置为：＃1a6eb6和它在#submenu ul li .text中的相同值设置我是prettz迷失了，有人可以帮我吗？

我的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>

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

Answer 1

不应该是

<span class="submenu">

Answer 2

这永远不会奏效。由于列表（ul）的父元素具有id或右边的子菜单的原因。

现在，由于您拥有子菜单的CSS，因此您可以更改HTML以满足除更改整个CSS文件之外的要求。

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

请注意，子菜单的className不起作用，因为#不是className选择器。这是一个ID选择器。

这不起作用：

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

CSS - 颜色没有变化

2 个答案: