使用css下拉的背景颜色

时间:2016-12-06 11:09:18

标签: css drop-down-menu

我有一个代码,我使用css在下拉框中给出蓝色的背景颜色。

我编写的代码为我提供了TEXT的颜色,而不是该特定行的整个区域。由于这个词较长,显示出较大的蓝色背景颜色与较小的对应物相比。

Html如下所示

<div>
<span style="font-weight:bold;">Name</span><span type="button" data-toggle="dropdown" data-target="#demo" ></span>
<span class="dropdown" id="demo">
    <ul class="dropdown-menu">
        <li><a href="#/account">My Account</a></li>
        <li><a href="#/referral">My Referrals</a></li>
        <li><a href="#/payment">My Payments</a></li>
        <li><a href="#/impersonation">Impersonate</a></li>
        <li><a href="#/logout" >Sign Out</a></li>
    </ul>
</span>
</div>

示例css如下所示

#demo >.dropdown-menu > li > a:hover,
#demo > .dropdown-menu > li > a:focus{

 background-color:#37c6f5;
 text-decoration: none;
 color: #ffffff;
}

此代码更改文本的背景颜色。我希望每个单词都具有相同的背景颜色长度,而不管单词的长度。

先谢谢。

1 个答案:

答案 0 :(得分:1)

display: block;与href标记一起使用。例如

#demo >.dropdown-menu > li > a{
   display: block;
}