cssを使用してドロップダウンする背景色

Question

私は、CSSのドロップダウンボックスで青の背景色を指定するコードを持っています。

私が書いたコードは、その特定の行の全領域ではなく、テキストの上に色を与えます。このため、長く続く言葉は、より小さい相手に比べて青色の背景色が大きくなります。

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

このコードは、テキストの背景色を変更し、以下のように進み、以下のように進みます。単語の長さにかかわらず、各単語の背景色の長さを同じにしたい。

ありがとうございました。

Answer 1

display: block;とhrefタグを使用してください。たとえば、

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