Hintergrund Bild ausrichten rechts vom Text in der Dropdown-Liste

Question

Grundsätzlich möchte ich das Ergebnis wie unten angezeigt, die der Pfeil an der rechten Seite des Textes in der Dropdown-Liste ausgerichtet ist.

Aber mein Pfeil für den längsten Text nach unten ausgerichtet :(

Bitte fragen, ob meine Erklärung nicht klar genug ist, in der Hoffnung, dass einige von Ihnen, mich mit einigen bieten könnten .! Beratung Dank

FYI: ich verwende die white-space:nowrap; den Zeilenumbruch zu verhindern

. 210

ul { list-style-type: none; margin:0; padding: 0; } 
 
ul.detailsec { float:left; width:auto; margin:0; padding:0; list-style-type:none;} 
 
ul.detailsec > li.maindetail { float:left; display:inline; position:relative; padding-left: 10px; } 
 
ul.detailsec > li input.button { background-color: #39007d; width: 103px; height: 30px; border: 0; color: #fff; cursor: pointer; font-size:12px;} 
 
ul.detailsec > li input.button:hover{ background-color: #313131;} 
 
ul.detailsec > li.maindetail:hover ul { visibility: visible; opacity: 1; transition-delay: 0s, 0s; } 
 
ul.detailsec li.maindetail ul { position:absolute; float:left; height:0; padding-top:1px; margin:0; right:0; visibility: hidden; opacity: 0; transition-property: opacity, visibility transition-duration: .4s, 0s; transition-delay: 0s, .4s; } 
 
ul.detailsec ul li.subdetail a{ background-color:#ededed; border-bottom:1px solid #d9d8d8; padding: 12px; display: block; white-space:nowrap; color: #5f5d5d; font-size: 13px; font-weight: normal; font-weight:bold; text-decoration: none; } 
 
ul.detailsec ul li.firstrow a { padding: 8px 12px !important;} 
 
ul.detailsec ul li.lastrow a { border-bottom:2px solid #b3b0b0 !important; } 
 
ul.detailsec ul li.smalltxt a{ font-size: 11px !important; color:#5f5d5d !important; border:none !important;} 
 
ul.detailsec ul li.subdetail a:hover { color:#36145f; font-weight:bold; text-decoration: none; } 
 

 
.arrow_menunav{ background: url('https://image.ibb.co/krCosk/arrow_menunav.png'); width:18px; height: 11px; float:right;}

<ul class="detailsec"> 
 
    <li class="maindetail"><input class="search" name="search" type="text" value="" placeholder="Search"></li> 
 
    <li class="maindetail"><input border="0" title="Login" type="submit" value="LOGIN" class="button"> 
 
    <ul> 
 
     <li class="subdetail"><a href="">Individuals<div class="arrow_menunav"></div></a></li> 
 
     <li class="subdetail"><a href="">Reg Type (ROB/ ROC/ UENO)<div class="arrow_menunav"></div></a></li> 
 
     <li class="subdetail lastrow"><a href="">Reg Type (Others)<div class="arrow_menunav"></div></a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

Dies wäre viel einfacher, wenn Sie nicht ein zusätzliches Element für das verwendet haben, aber angewandt nur den Hintergrund der a Element selbst ...

ul { list-style-type: none; margin:0; padding: 0; } 
 
ul.detailsec { float:left; width:auto; margin:0; padding:0; list-style-type:none;} 
 
ul.detailsec > li.maindetail { float:left; display:inline; position:relative; padding-left: 10px; } 
 
ul.detailsec > li input.button { background-color: #39007d; width: 103px; height: 30px; border: 0; color: #fff; cursor: pointer; font-size:12px;} 
 
ul.detailsec > li input.button:hover{ background-color: #313131;} 
 
ul.detailsec > li.maindetail:hover ul { visibility: visible; opacity: 1; transition-delay: 0s, 0s; } 
 
ul.detailsec li.maindetail ul { position:absolute; float:left; height:0; padding-top:1px; margin:0; right:0; visibility: hidden; opacity: 0; transition-property: opacity, visibility transition-duration: .4s, 0s; transition-delay: 0s, .4s; } 
 
ul.detailsec ul li.subdetail a{ background-color:; border-bottom:1px solid #d9d8d8; padding: 12px 37px 12px 12px; display: block; white-space:nowrap; color: #5f5d5d; font-size: 13px; font-weight: normal; font-weight:bold; text-decoration: none; background: #ededed url('https://image.ibb.co/krCosk/arrow_menunav.png') no-repeat top 50% right 10px; } 
 
ul.detailsec ul li.firstrow a { padding: 8px 12px !important;} 
 
ul.detailsec ul li.lastrow a { border-bottom:2px solid #b3b0b0 !important; } 
 
ul.detailsec ul li.smalltxt a{ font-size: 11px !important; color:#5f5d5d !important; border:none !important;} 
 
ul.detailsec ul li.subdetail a:hover { color:#36145f; font-weight:bold; text-decoration: none; }

<ul class="detailsec"> 
 
    <li class="maindetail"><input class="search" name="search" type="text" value="" placeholder="Search"></li> 
 
    <li class="maindetail"><input border="0" title="Login" type="submit" value="LOGIN" class="button"> 
 
    <ul> 
 
     <li class="subdetail"><a href="">Individuals<div class="arrow_menunav"></div></a></li> 
 
     <li class="subdetail"><a href="">Reg Type (ROB/ ROC/ UENO)<div class="arrow_menunav"></div></a></li> 
 
     <li class="subdetail lastrow"><a href="">Reg Type (Others)<div class="arrow_menunav"></div></a></li> 
 
    </ul> 
 
    </li> 
 
</ul>